I'm not sure how else to describe this: When a scroll bar appears and I scroll to the right due to overflow, my `nav` tag is resized to a shorter field. In any case, pictures are better:

![Without Scrollbar](https://i.stack.imgur.com/Way68.png)

![With Scrollbar](https://i.stack.imgur.com/Tm2XE.jpg)

In the second image, it is obvious that the field has shortened in length. I'm not sure why this is happening. Here's my code:

```
<link rel="stylesheet" type="text/css" href="../CSS/Style2.css"/>

<body>
  <script type="text/javascript" src="../JS/jquery.js"></script>
  <script type="text/javascript" src="../JS/respond.min.js"></script>
  <script src="../JS/jquery.min.js"></script>
  <script type="text/javascript" src="../JS/menu_dropdown.js"></script>

  <nav class="clearfix">  
    <ul class="clearfix">  
    <li><a href="#">Home</a></li>  
    <li><a href="#">Territory</a></li>  
    <li><a href="#">Publishers</a></li>  
    <li><a href="#">Special Campaign</a></li>  
    <li><a href="#">Management</a></li>  
    <li><a href="#">About</a></li>    
</ul>  
<a href="#" id="pull">Menu</a>  

```

The `CSS`:

```
@charset "utf-8";
/* CSS Document */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: 100%;
  background: url(../Images/bg.jpg)
}

body {
  height: 100%;
  overflow-y: hidden;
  padding: 0;
  margin: 0;
}

nav {  
  height: 40px;  
  width: 100%;  
  background: #455868;  
  font-size: 11pt;  
  font-family: 'PT Sans', Arial, sans-serif;  
  font-weight: bold;  
  position: relative;  
  border-bottom: 2px solid #283744;  
}  
nav ul {  
  padding: 0;  
  margin: 0 auto;  
  width: 900px;  
  height: 40px;  
}  

nav li {  
  display: inline;  
  float: left;  
}  

.clearfix:before,  
.clearfix:after {  
  content: " ";  
  display: table;  
}  
.clearfix:after {  
  clear: both;  
}  
.clearfix {  
  *zoom: 1;  
}  

nav a {  
  color: #fff;  
  display: inline-block;  
  width: 150px;  
  text-align: center;  
  text-decoration: none;  
  line-height: 40px;  
  text-shadow: 1px 1px 0px #283744;  
}  

nav li a {  
  border-right: 1px solid #576979;  
  box-sizing:border-box;  
  -moz-box-sizing:border-box;  
  -webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
  border-right: 0;  
}  

nav a:hover, nav a:active {  
  background-color: #8c99a4;  
}  

nav a#pull {  
  display: none;  
}  

@media screen and (max-width: 600px) {  
nav {   
    height: auto;  
}  
nav ul {  
    width: 100%;  
    display: block;  
    height: auto;  
}  
nav li {  
    width: 50%;  
    float: left;  
    position: relative;  
}  
nav li a {  
    border-bottom: 1px solid #576979;  
    border-right: 1px solid #576979;  
}  
nav a {  
    text-align: left;  
    width: 100%;  
    text-indent: 25px;  
}  
}  

@media only screen and (max-width : 480px) {  
nav {  
    border-bottom: 0;  
}  
nav ul {  
    display: none;  
    height: auto;  
}  
   nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
}
nav a#pull:after {
    content:"";
    background: url(../Images/nav-icon.png) no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
} 
}  

@media only screen and (max-width : 320px) {  
nav li {  
    display: block;  
    float: none;  
    width: 100%;  
}  
nav li a {  
    border-bottom: 1px solid #576979;  
}  
}  

```

Any insight is appreciated.