Update: The issue has been resolved. Thank you for the assistance.
I'm facing a problem with my navigation bar on my website. I can't seem to get it to span the entire width of the page while staying centered. The navigation bar is sticky and functions as intended, but when it sticks to the top, it doesn't go all the way as it should. The website is still in early development, but I need to fix this before moving forward. Please excuse the sarcastic comments in some of my tags - it's just how I cope with frustrations while working.
Here are the links I've already checked for help:
-
A Full-Width Centered Navigation Bar
I tried their CSS for a centered navigation bar, but it didn't span the full width of the page like I wanted. Adjusting the width value only shifted the links to the left side. -
Bootstrap navbar will not center no matter what
Following the padding instructions only decreased the overall height of the navigation bar. -
Why is right-aligned text in my navbar shifted too far to the right?
This post didn't directly relate, but I thought it might offer some insight. It ended up just pointing out a bug in a Bootstrap version that I'm not using. -
Why won't my navbar center?
One suggestion was to use a negative left margin, which did help temporarily. However, I prefer finding a permanent solution rather than a quick fix.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Den</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" media="screen, projection" href="style.css">
<script type ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type ="text/javascript" src="script.js"></script>
</head>
<body>
<div class="status"></div>
<div class="container">
<center><a href="http://www.wolvesofthedust.com/"><img src="http://i1288.photobucket.com/albums/b494/ShadowfangInnovia/WolvesoftheDustSiteHeader_zpsdddba823.png" height="auto" width="940" border="0" alt=" photo WolvesoftheDustSiteHeader_zpsdddba823.png"/></a></center>
<nav>
<ul class="clearfix">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</nav>
<br/><br/>
<center><h2>THIS WEBSITE IS UNDER CONSTRUCTION!!!</h2></center>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus lectus vel congue mattis.</p>
</div>
CSS:
html {
padding: 0;
margin: 0;
background-color: #000;
}
/* Additional CSS styles would be defined here */
JS:
jQuery(document).ready(function() {
// jQuery script would go here
});
You can also view a JSFiddle here and visit the website here.