My footer's central navigation item is not centered, and I'm struggling to align it while maintaining even spacing between the links. I attempted to center it by adding a margin-right: 45px in the CSS file at the bottom (commented out in the Codepen). However, this additional margin disrupts the uniform spacing.
How can I keep the nav-container as a flexbox, centering the middle link with equal spacing between all three links?
I'm uncertain if achieving what I envision would be aesthetically pleasing. It might throw off the entire navigation bar since the left and right links differ in text length. I simply find it frustrating that I can't seem to resolve this issue.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="wedding-index.css">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Mc-Stamm Wedding</title>
</head>
<body>
<header class="main-header">
<i class="fas fa-heart"></i>
<a class="main-header__link" href="index.html">The Mc-Stamm Wedding</a>
<i class="fas fa-heart"></i>
</header>
<main class="main-container">
<div class="main-container__image main-container__image-one"><img src="http://www.freegreatpicture.com/files/146/25102-colorful-high-resolution-background.jpg" alt="Walking down beach to the proposal"></div>
...
<p class="main-container__paragraph main-container__paragraph-one">Please join us</p>
<p class="main-container__paragraph main-container__paragraph-two">September 28, 2019</p>
</main>
<footer class="main-footer">
<nav class="main-nav">
<a class="main-nav__link" href="venue-information.html">Venue Information</a>
<a class="main-nav__link" href="accommodations.html">Accommodations</a>
<a class="main-nav__link" href="wedding-party.html">Wedding Party</a>
</nav>
</footer>
</body>
</html>
CSS
/* Wedding Index CSS */
/* browser reset */
html {
box-sizing: border-box;
font-size: 16px;
}
...
}
/* End of positioning rules for scaled image div's */
/* Changes primary image border shape from circle to same as other image div's on hover */
.main-container__image-ten:hover img {
border-radius: 20px;
}
/* Styles "Please join us" and "September 28, 2019" */
.main-container__paragraph {
color: rgb(255, 255, 255);
font-family: "Great Vibes", cursive;
font-size: 2.5rem;
letter-spacing: 0.1em;
}
/* Positions "Please join us" on grid */
.main-container__paragraph-one {
grid-area: 23 / 9 / 27 / 26;
}
/* Positions "September 28, 2019" on grid */
.main-container__paragraph-two {
grid-area: 23 / 72 / 27 / 97;
}
/* Style and positons <footer> element */
.main-footer {
width: 100%;
height: auto;
background: rgb(255, 255, 255);
padding-top: 30px;
}
/* Makes <nav> container a flexbox and positions flex items */
.main-nav {
display: flex;
height: auto;
width: 100%;
justify-content: space-evenly;
align-items: center;
}
/* Styles link flex items */
.main-nav__link {
text-decoration: none;
color: rgb(0, 0, 0);
font-family: "Montserrat", sans-serif;
letter-spacing: 0.3em;
}
/* .main-nav__link:nth-of-type(2) {
margin-right: 45px; /* pushed middle link more toward center, but disrupted space-evenly positioning */
} */