Currently, I am gaining experience by working on websites but I have encountered an issue with a specific element. It seems that the id headerInner and the class navLogo are displaying at 1200 x 0 pixels when inspected. My goal is to place all the links and the logo in a box, centered within the header. However, the result is not as expected:
https://i.sstatic.net/EABd9.png
Here is the HTML code snippet:
<body>
<header>
<div id="headerInner">
<nav class="navLogo">
<a href="#" id="menuIcon"></a>
<ul>
<li>
<a class="current" href="index.html">Home</a>
</li>
<li>
<a href="studio.html">Studio</a>
</li>
<li>
<a class="navLogo" href="index.html"><img
src="img/navBanner.png"></a>
</li>
<li>
<a href="live.html">Live</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
And here is the relevant CSS code:
header {
margin: 0 auto;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
background-color: #a30101;
width: 95%;
height: 86px;
}
#headerInner {
max-width: 1200px;
margin: 0 auto;
}
#logo {
margin: 20px;
float: left;
width: 200px;
height: 60px;
background: url(img/logo.png) no-repeat center;
}
nav {
margin: 0 auto;
padding: 0;
}
.navLogo {
margin: 0 auto;
}
#menuIcon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menuIcon {
border-radius: 4px 4px 0 0;
}
ul {
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
padding: 10px;
}