When the screen size is less than 450px, the logo disappears in order to make room for navigation. However, the navigation then extends about 20px off the left side of the screen.
This CSS code snippet appears to be relevant:
@media screen and (max-width: 450px) {
img#logo {
display: none;
width: 0;
}
nav {
width: 100%;
min-width: 100%;
}
}
div#top{
position: fixed;
top: 0px;
width: 100%;
height: 130px;
z-index: 5;
}
img#logo {
border: 0;
float: left;
width: 20%;
margin-right: 2%;
margin-left: 2%;
margin-top: 5px;
max-width: 123px;
}
nav { position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 60px;
max-height: 60px;
margin: 5px 5px;
}
nav button {
padding: 0 4px;
height: 28px;
font: 16px;
}
nav button ul {
position: relative;
display: none;
}
nav button:hover ul, nav button:focus ul {
display: block;
z-index: 6;
list-style: none;
padding: 4px;
}
nav button:hover li, nav button:focus li {
padding: 4px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover, nav a:focus {
color: #9dab71;
}
The following HTML code seems to be relevant:
<div id="top">
<a href="default.html"><img id="logo" src="http://www.briligg.com/images/briligg-loopless-blue.png"
alt="briligg home" /></a>
<nav>
<button><a href="futuremoon.html#begin">Purpose</a></button>
<button><a href="moonvsmars.html">Moon vs Mars</a>
<ul>
<li><a href="moonvsmars.html#ambiance">Ambiance</a></li>
<li><a style="border-bottom: 1px solid #666666;" href="moonvsmars.html#communication">Communication</a></li>
<li><a href="thereandback.html">There and Back</a></li>
</ul>
</button>
<button><a href="beingthere.html">Being There</a>
<ul>
<li><a href="beingthere.html#domination">World Domination</a></li>
<li><a href="beingthere.html#chickens">Chickens</a></li>
<li><a href="beingthere.html#gravity">Down with Gravity</a></li>
<li><a href="beingthere.html#moonstar">The Moonstar</a></li>
</ul>
</button>
</nav>
</div>