float-css overlaps next to div image - css

Question

My logo and navigation float to the left and right respectively when the screen gets to 40rem. However it overlaps with the next div which contains a background image. I tried setting margins but that just moved both logo/nav and the image lower on the page.
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
}
.clearfix::after,
section::after {
content: '';
display: block;
clear: both;
}
/* typography
================= */
.unstyled-list {
margin: 0;
padding: 0;
list-style-type: none;
}
/* header
================= */
header {
position: relative;
left: 0;
right: 0;
margin: 1em;
}
.logo {
width: 200px;
height: 40px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
padding: 0.125em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: .8rem;
padding: .75em;
color: #DDD;
}
/* home-main
================= */
.home-main {
background-image: url('../manjitcss/img/manjit-main.png');
background-size: cover;
background-position: center;
padding: 10em 0;
}
#media(min-width:40rem) {
.logo {
float: left;
margin-top: .5em;
}
nav {
float: right;
}
}
#media(min-width:60rem) {
.logo {
width: 250px;
height: 50px;
}
nav {
margin-top: .5em;
}
nav a {
font-size: 1.04em;
}
}
<header>
<img src="../manjitcss/img/logo.jpg" alt="Foo logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="home-main">
<div class="container">
</div>
</section>

Answer 1

You have .clearfix in your css, but you have not applied them to header whose contents you are floating.
Add the class to header - see demo below:
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
}
.clearfix::after,
section::after {
content: '';
display: block;
clear: both;
}
/* typography
================= */
.unstyled-list {
margin: 0;
padding: 0;
list-style-type: none;
}
/* header
================= */
header {
position: relative;
left: 0;
right: 0;
margin: 1em;
}
.logo {
width: 200px;
height: 40px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
padding: 0.125em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: .8rem;
padding: .75em;
color: #DDD;
}
/* home-main
================= */
.home-main {
background-image: url('../manjitcss/img/manjit-main.png');
background-size: cover;
background-position: center;
padding: 10em 0;
}
#media(min-width:40rem) {
.logo {
float: left;
margin-top: .5em;
}
nav {
float: right;
}
}
#media(min-width:60rem) {
.logo {
width: 250px;
height: 50px;
}
nav {
margin-top: .5em;
}
nav a {
font-size: 1.04em;
}
}
<header class="clearfix">
<img src="http://placehold.it/50x50" alt="Foo logo" class="logo" />
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="home-main">
<div class="container">
container
</div>
</section>

Answer 2

When you use float try to use overflow property on parent. As float leaves its parent. Or you can use clearfix also.

Answer 3

This is an issue with float. You may use clearfix or apply float for .home-main as below
#media(min-width:40rem) {
.logo {
float: left;
margin-top: .5em;
}
nav {
float: right;
}
.home-main{
width: 100%;
float: left;
}
}