I am experiencing an issue with my CSS styling. The content following the top navigation bar is not aligning properly. I utilized the float: left and right properties in my code and then added a clearfix to align the next header, but unfortunately, it is not functioning as expected. My goal is to have the heading aligned with the paragraph.
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
#top-bar {
width: 100%;
height: 51px;
background: #ba2e1f;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#top-bar ul li {
display: inline;
line-height: 51px;
padding: 0 7px 0 0;
float: left;
}
#top-bar ul li a {
list-style: none;
text-decoration: none;
font-weight: lighter;
font-size: 14px;
border-right: 1px solid white;
padding: 0 6px 0 0px;
color: white;
display: inline;
}
#top-bar input {
float: right;
height: 25px;
width: 210px;
margin: 15px;
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
}
.clear {
clear: both;
}
#container {
width: 960px;
margin: 0 auto;
background-color: #ffffff;
}<div id="top-bar">
<div id="wrapper">
<ul>
<li><a href="">Sign Up</a></li>
<li><a href="">Login</a></li>
<li><a href="">RSS Feeds</a></li>
<li><a href="">Archived News</a></li>
</ul>
<input type="search" placeholder="Search..">
<div class="clear"></div>
</div>
</div>
<div id="container">
<header>
<h1>My new Project</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, minus.</p>
</header>
<nav></nav>
<section id="intro"></section>
<section id="content"></section>
<footer></footer>
<div id="foot"></div>
</div>