CSS: How to avoid nav bar from overflowing onto content

Hey all! Please let me know if this post makes little sense as it’s difficult to describe.

I’m designing a child theme CSS (based off Vigilance by the Theme Foundry). So far so good but on the navigation bar—which is nothing more than an inline ul declaration— I had one question:

Any advice for how I could possibly account for text overflow in the Navigation Bar? I am designing this theme for a WordPress which—for the foreseeable future—will be untouched. There aren’t that many people in my organization familiar with web coding so I am building this CSS for possible worst case scenarios. If too many pages are placed in the navigation bar: it could bleed onto the #content portion of the design. Not a desirable situation.

The attribute overflow does not seem to help. I have tried to position: relative everything I can, but the issue is that I have float: left on my navigation bar a: link so as to perfect the design.

Here’s some selected CSS:

#nav {
	border-top: 1px dotted #666;
	border-bottom: 1px dotted #666;
	height: 45px;
	width: 100%;
}
#nav a:link {
	float: left;
	width: auto;
	padding: 11px 31px 11px 31px;
}

#nav a:hover,
#nav a:visited {
	color: #000;
	background-color: #ffd700;
	border-left: 1px dotted #666;
	border-right: 1px dotted #666;
	border-bottom: 2px solid #963;
}

Thanks!