I'm in the process of setting up a fresh homepage and I've implemented the code below:
menu {
width: 100%;
height: 60px;
background: rgb(0, 0, 0);
z-index: 2;
position: fixed;
}
#content {
margin: 0 auto;
width: 1024px;
height: 50px;
padding: 5px 20px 5px 20px;
}
#content img {
padding: 5px 10px;
width: 130px;
height: 40px;
float: left;
}
nav {
float: right;
overflow: hidden;
height: 50px;
line-height: 50px;
width: auto;
right: 0em;
}
nav li {
display: inline-block;
list-style: none;
color: rgb(255, 255, 255);
font-family: 'Roboto Condensed', sans-serif;
font-size: 1em;
}
nav li:not(:last-child) {
margin: 0px 30px 0px 0px;
}
nav li a {
text-decoration: none;
color: rgb(255, 255, 255);
}
nav li a:hover {
border-bottom: 1px solid rgb(209, 27, 14);
text-decoration: none;
}<menu>
<div id="content">
<a href="jeggon-racing.de">
<img alt="Jeggon Racing" src="images/logo.png">
</a>
<nav>
<ul>
<li>
<a href="#start">Start</a>
</li>
<li>
<a href="#about">Über uns</a>
</li>
<li>
<a href="#leistungen">Leistungen</a>
</li>
<li>
<a href="#offers">Angebote</a>
</li>
<li>
<a href="#galerie">Galerie</a>
</li>
<li>
<a href="#bewertungen">Bewertungen</a>
</li>
<li>
<a href="#kontakt">Kontakt</a>
</li>
</ul>
</nav>
</div>
</menu>After implementing a sticky header, I noticed that when resizing my browser window, the element does not stay aligned to the right (it lacks responsiveness). How can I address this issue?