Navbar full width & dropdown width issues - html

Question

I have a couple of problems to which the solution has eluded me. The first problem:
As a horizontal navbar, that section needs to span the entire width of the screen. This is all well and good on my monitor, but when I zoom in or adjust the browser width so that the horizontal scrollbar appears, the navbar background cuts off at the length equal to the browser's width. That is, no matter what the size or zoom, the navbar will span the entire visible width, but scrolling even a little to the right will show you that the navbar does not span the entire page width.
The second problem relates to the dropdown feature. At the moment, the width adjusts automatically to the width of the longest word (ie, spaces cause words to break to the next line). Firstly, how do I stop this, and secondly, is it possible to adjust the width to always be as wide as the distance between the borders to either side of the main navbar links? (EDIT: Ignore the first part of this paragraph. I accidentally deleted white-space:nowrap from the CSS. Second part is still an issue, though)
Link to fiddle
HTML:
<nav class="bg">
<ul class="width nav">
<li><span class="bord"></span></li>
<li>DropLink
<ul class="drop">
<li>LongerLinkName</li>
<li>LongLink WithSpace</li>
<li>Link</li>
</ul>
</li>
<li><span class="bord"></span></li>
<li>Link</li>
<li><span class="bord"></span></li>
<li>Link</li>
<li><span class="bord"></span></li>
<li>Link</li>
<li><span class="bord"></span></li>
<li>Link</li>
<li><span class="bord"></span></li>
</ul>
</nav>
CSS:
*{margin:0;padding:0;font-size:small;vertical-align:middle;}
a{color:#F00;text-decoration:none;}
.width{margin:0 auto;min-width:1000px;width:84%;}
.bg,.drop{background:#000;}
nav>ul{width:100%;text-align:justify;font-size:0;position:relative;}
nav>ul:after{content:"";width:100%;display:inline-block;}
nav li{list-style:none;display:inline-block;position:relative;}
nav a{display:inline-block;background:rgba(0,0,0,0);transition:background 0.2s linear;padding:8px;}
nav a:hover{background:rgba(0,0,255,1);}
.drop{position:absolute;left:-1000px;top:-1000px;opacity:0;transition:opacity .5s,top 0 .25s,left 0 .25s;border-left:1px solid #BBB;border-right:1px solid #BBB;border-bottom:1px solid #BBB;}
.nav li:hover .drop{left:0;top:100%;opacity:1;transition:opacity .5s,top 0s,left 0s;}
.bord{border-left:1px solid #000;border-right:1px solid #555;padding:7px 0;}
Also, while I'm at it, how come I can't get the borders to be exactly the same height as the navbar itself? If I increase the padding, it becomes a pixel too long. If I decrease the padding, it becomes a pixel too short.
Also, apologies if your browser requires prefixes in the code. I substituted prefixed CSS for a script that does it for me.

Answer 1

For your first issue I was unable to replicate it (maybe I misunderstood you).
For your second issue you can stop the wrapping of the link in the nav with the following css:
.nav a {
//other styles
white-space: nowrap;
}

Answer 2

I think I've got what you're after:
HTML (removed the border li's because the parent li of the dropdowns needs to be the full width you want the dropdown to be):
<nav class="bg">
<ul class="width nav">
<li>DropLink
<ul class="drop">
<li>LongerLinkName</li>
<li>LongLink WithSpace</li>
<li>Link</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
CSS:
* {margin: 0; padding: 0; font-size: small; vertical-align: middle;}
a {color: #F00; text-decoration: none;}
.width {margin: 0 auto; min-width: 1000px; width: 84%; }
.bg {min-width:1000px;}
.bg, .drop {background: #000;}
nav>ul {width: 100%; text-align: justify; font-size: 0; position: relative;}
nav>ul:after {content: ""; width: 100%; display: inline-block;}
nav ul li {border-right: 1px solid #555; list-style: none; display: inline-block; position: relative; text-align:center; width:19%;}
nav ul li:first-child {border-left:1px solid #555;}
nav a {display: inline-block; background: rgba(0,0,0,0); transition: background 0.2s linear; padding: 8px;}
nav a:hover {background: rgba(0,0,255,1);}
.drop {position: absolute;left: -1000px;top: -1000px;opacity: 0;transition: opacity .5s, top 0 .25s, left 0 .25s;border-left: 1px solid #BBB;border-right: 1px solid #BBB;border-bottom: 1px solid #BBB;}
.nav li:hover .drop {left: 0;top: 100%;opacity: 1;transition: opacity .5s, top 0s, left 0s;}
nav ul ul {min-width:100%;}
nav ul ul li,
nav ul ul li a {border:0;display:block;text-align:left;white-space:nowrap;width:auto;}

Answer 3

Question 1: I'm not 100% sure what you're looking to do here, but the problem you're having appears to stem from the following:
.width{margin:0 auto;min-width:1000px;width:84%;}
Changing this line to the following resolves your issue, but may introduce other issues if you intentionally had the width set smaller:
.width{margin:0 auto;min-width:1000px;background:#000;width:84%;}
Question 2: I recently answered a very similar question at: Li element breaking content even with display block