how to stop a nav being offset by the logo? - html

Question

I'm trying to make a navigation bar with a center-aligned menu, but the logo is stopping the menu from being in the center of the page and instead pushing the menu to the right. So the menu is offset from being horizontally centered by the width of the logo. I want it so that my menu is in the center of the page rather than pushed 150px to the right by the logo.
How can I make it so that my logo doesn't shift my menu to the right, stopping it from being center-aligned in the body?
body {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 16px;
margin: 0;
}
h1 {
font-size: 6rem;
font-weight: 400;
}
h2 {
font-size: 4.5rem;
font-weight: 400;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 5% 0;
}
header img {
width: 150px;
}
nav {
width: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
padding-right: 1rem;
text-transform: uppercase;
}
nav ul li a {
text-decoration: none;
color: black;
}
<header>
<img src="../Images/Logo/Black-Logo.png" alt="Logo" />
<nav>
<ul id="MenuItems" class="NavMenu">
<li>Home</li>
<li>About Us</li>
<li>Hours</li>
<li>Get in Touch</li>
</ul>
</nav>
</header>

Answer 1

You could erase the flex settings from the container, apply absolute position to the logo (and relative to the header), add text-align: center; to the header to center the nav and erase/reset most of the paddings and margins except those shown below (exact settings see snippet below).
body {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 16px;
margin: 0;
}
header {
width: 90%;
margin: 20px 5% 0;
text-align: center;
position: relative;
}
header img {
width: 50px;
position: absolute;
left: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
padding-right: 1rem;
text-transform: uppercase;
}
nav ul li:last-child {
padding-right: 0;
}
nav ul li a {
text-decoration: none;
color: black;
}
img {
}
<header>
<img src="../Images/Logo/Black-Logo.png" alt="Logo" />
<nav>
<ul id="MenuItems" class="NavMenu">
<li>Home</li>
<li>About Us</li>
<li>Hours</li>
<li>Get in Touch</li>
</ul>
</nav>
</header>

Answer 2

Use position: absolute for the logo and it will make it "not take up space" in the navbar:
#logo {
position: absolute;
top: 0 left: 0;
}
body {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 16px;
margin: 0;
}
h1 {
font-size: 6rem;
font-weight: 400;
}
h2 {
font-size: 4.5rem;
font-weight: 400;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 5% 0;
}
header img {
width: 150px;
}
nav {
width: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
padding-right: 1rem;
text-transform: uppercase;
}
nav ul li a {
text-decoration: none;
color: black;
}
<header>
<img id="logo" src="../Images/Logo/Black-Logo.png" alt="Logo" />
<nav>
<ul id="MenuItems" class="NavMenu">
<li>Home</li>
<li>About Us</li>
<li>Hours</li>
<li>Get in Touch</li>
</ul>
</nav>
</header>

Answer 3

I'd use a container (see div with class wrapper below) and make the logo position: absolute. This simplifies your CSS.
.logo {
position: absolute;
}
.wrapper {
margin: 0 auto;
}
<div class="logo"><img src="../Images/Logo/Black-Logo.png" alt="Logo" /></div>
<div class="wrapper">
<nav>
<ul id="MenuItems" class="NavMenu">
<li>Home</li>
<li>About Us</li>
<li>Hours</li>
<li>Get in Touch</li>
</ul>
</nav>
</div>
You can get rid of this CSS:
nav {
width: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
}