Why is the DIV misplaced when the window is minimized? - html

Question

When the window is minimized, everything remains intact but not the navigation.
The image below is when the window is maximized and the image above when the window is minimized.
HTML:
<header>
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div>
<nav>
<div class="navigation">
<a href="home.html">
<div class="box" style="background: rgba(0, 0, 0, 0.4)">
<img src="images/home.png">
<div class="name" style="background: rgba(0, 0, 0, 0.4)">HOME</div>
</div>
</a>
<div class="box">
<img src="images/aboutus.png">
<div class="name">ABOUT US</div>
</div>
<div class="box">
<img src="images/groupcompanies.png">
<div class="name">GROUP OF COMPANIES</div>
</div>
<div class="box">
<img src="images/career.png">
<div class="name">CAREER</div>
</div>
<div class="box">
<img src="images/contactus.png">
<div class="name">CONTACT US</div>
</div>
</div>
</nav>
</div>
</header>
CSS:
body {
background-image:url(images/pattern.png);
min-width: 775px;
overflow:auto;
}
#font-face {
font-family:"myfont";
src:url(font/PTN57F.woff);
}
.header {
max-width:1200px;
min-width:200px;
height:170px;
margin:0 auto;
margin-top:10px;
background-color:rgba(0, 0, 0, 0.5);
border-radius:3px;
}
.logo {
width:230px;
}
.logo img {
margin-left:20px;
margin-top:31px;
border-right:solid #FFF 1px;
padding-right:33px;
height:auto;
width:auto;
float:left;
}
.navigation {
width:800px;
height:100px;
margin-left:256px;
float:none;
}
.box {
height:100px;
width:150px;
margin-right:5px;
float:left;
background: rgba(0, 0, 0, 0.2);
-webkit-transition: background 1s;
-o-transition: background 1s;
-moz-transition: background 1s;
border-radius:2px;
margin-top:31px;
}
.box:hover {
background: rgba(0, 0, 0, 0.4);
-webkit-transition: background 1s;
-o-transition: background 1s;
-moz-transition: background 1s;
}
.name {
height:23px;
width:auto;
text-align:center;
font-family:myfont;
font-size:14px;
color:#FFF;
text-decoration:none;
}
.box img {
float:none;
margin-left:38px;
margin-top:3px;
}

Answer 1

The boxes are inside div.navigation, which has a left margin of 256px. When the div.header resizes, the left margin stays the same. If you want the navigation centered inside the header you can use
.navigation {
margin-left: auto;
margin-right: auto;
}
This way it will not overflow the header div and adjust the left margin according to the overall width.
As of your comment, if you want the header stay the same, you must give it a fixed width, like
.header {
width: 1200px;
}
Then, you also don't need the min-width and max-width.