Nav div moving down from header div

When in fullview browser, it works ok.
But when i resize the browser page, the ‘nav div’ move down from ‘header div’.

My question is how do i keeps the ‘nav div’ inside the ‘header div’ for any screen size?

Here is my html & css codes.

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Intermark Mall | Welcome</title>
    <link href=",300,400" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
      <div class="container">
        <div id="company">
          <img class ="logo" src="./img/logo.png">
            <li><a href="#">about</a></li>
            <li><a href="#">stores</a></li>
            <li><a href="#">happenings</a></li>
            <li><a href="#">contact</a></li>
            <li class="btn1"><a href="#">tourist privilege</a></li>

  font: 16px/1.5 'Roboto', 'Myriad Pro', sans-serif;
  padding: 0;
  margin: 0;

.container {
  /*width: 100%;*/
  margin: auto;
  /*overflow: hidden;*/

header {
  background: #bf1e2e;
  color: #fff;
  min-height: 90px;

header a{
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;

header ul {
  margin: 0;
  padding: 0;

header li {
  float: left;
  display: inline;
  padding: 0 35px 0 35px;

header #company {
  float: left;
  margin-left: 350px;

header nav {
  float: right;
  margin-right: 400px;
  margin-top: 30px;

header .btn1 a {
  font-weight: bold;
  border: 1px solid #fff;
  border-radius: 2px;
  padding: 12px 15px 12px 15px;

You are floating your nav div which takes it out of the flow of elements. You need to clear your float.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.