float-css overlaps next to div image

0 votes
asked Sep 13, 2017 by ankit

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><a href="">Home</a></li> <li><a href="">About Me</a></li> <li><a href="">Contact</a></li> </ul> </nav>
</header>
<section class="home-main"> <div class="container"> </div>
</section>

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...