Previously, the text was aligned until I added links to them. Now they are not aligning properly. Any assistance would be highly appreciated. Below you can find my CSS and HTML code along with a screenshot of the specific issue. I am unsure about the root cause of this alignment shift. Each element is categorized into classes, and the footer class is positioned at the bottom of the HTML.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- utility css file -->
<link rel="stylesheet" href="css/utility.css">
<!-- style css file -->
<link rel = "stylesheet" href = "css/style.css">
<!-- fontawesome cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- navbar section -->
...
<!-- custom js file -->
<script src="js/script.js"></script>
</body>
</html>
Style CSS
...
Utility CSS
...