CSS - My border-bottom resizes when I resize my browser - css

Question

I use a border-bottom on my navigation div, which is 100% wide. When I resize my browser window, the border-bottom suddenly gets cut off to te size that I just resized my browser to.
Does anyone know a solution to this?
my css:
#nav {
clear: both;
height: 40px;
width: 100%;
text-align: center;
border-bottom: 3px #ff6600 solid;
}
#nav ul {
margin: 0 0 0 670px;
white-space: nowrap;
}
#nav ul li {
display: inline-block;
list-style-type: none;
}
#nav ul li a {
display: inline-block;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000;
text-transform: uppercase;
letter-spacing: 3.5px;
}
My html:
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Hobby's</li>
<li>Links</li>
<li>Contact</li>
</ul>
</div>

Answer 1

By assigning a margin left value of 670px, you are effectively setting a width to your page.
Thus, if the page resizes to something smaller than that (or that plus the text in the list items), it will appear that things get cut off because they extend beyond the frame of the window.
In order to have it be completely dynamic on width based on the window size, you'd need to have absolutely no hard-coded set values. You could try using a % for the margin, or you could use an alternate css style based on the width of the window.

Answer 2

I've found the answer!
By looking at other posts, someone said that the 100% width only applies to the 'viewport' of the screen. So thats why the div gets cut off.
To solve this you have to add a min-width in pixels to the body in css.
So in my case I changed it to:
body {
min-width: 1439px;
}

Answer 3

i think this way is better
change
#nav ul {
margin: 0 0 0 670px;
white-space: nowrap;
}
to
#nav ul {
float: right; // instead of margin: 0 0 0 670px;
margin: 0; //reset ul default properties
padding: 0; //reset ul default properties
}
also change this
#nav ul li a {
display: inline-block;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000;
text-transform: uppercase;
letter-spacing: 3.5px;
}
to
#nav ul li a {
display: inline-block;
padding: 0 20px; // padding only for left and right, just use line-height instead of padding-top and padding-bottom
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000;
text-transform: uppercase;
letter-spacing: 3.5px;
line-height: 40px; // same value as navigation height (#nav) , no need to use padding for top and bottom
}