Recently, I've delved into the world of HTML/CSS and encountered a challenge. My goal is to align my header (containing an h1 tag) and navbar on the same line. Ideally, the header should float left with the navbar positioned closely to its left. However, all my attempts thus far have not produced the desired outcome.
I experimented with floating both the header (identified by mainHeader) and the navbar (with navBar ID) to the left, but that didn't work. I also tried floating the header left and the navbar right, only to face another setback.
<header class="mainHeader"><h1>Website</h1></header>
<div class="container">
<nav id="navBar">
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Books</li>
</a>
<a href="#">
<li>Contact Us</li>
</a>
</ul>
</nav>
</div>
<div class="clr"></div>
<div class="container">
#mainHeader{
float: left;
width:30%;
box-sizing: border-box;
}
#navBar{
;
margin-top: 0px;
float:left;
padding: 0;
margin: 0;
float:right;
width:70%;
box-sizing: border-box;
}
#navBar ul{
list-style: none;
text-align: center;
}
#navBar li{
display: inline;
}
#navBar a{
text-decoration: none;
}