html - 使用词缀 Bootstrap 将粘性导航栏居中并扩展边框

Question

我在这里重现了我遇到的问题: https://jsfiddle.net/DTcHh/10279/

/*main-navigation*/
/*view the list as a whole*/
.nav ul{
	list-style: none;
	background-color: #292929;
	text-align: center;
}

/*properties of each list item independently*/
.nav li {
	font-family: proximanova-regular-webfont;
	font-size: 30px;

	/*display in horizontal order*/
	display: inline-block; 
}


.nav a {
	text-decoration: none;
	color: #FFFFFF;
	display: block;
	
	padding-right: 60px;
	padding-left: 60px;
	
	padding-top: 30px;
	padding-bottom: 30px;
}



.nav a:hover, .nav a:focus,.nav a:active , #mainnav a.thispage{
	text-decoration: none;
	background-color: #FFFFFF;
	color: #292929;
	-o-transition:.675s;
	-ms-transition:.675s;
	-moz-transition:.675s;
	-webkit-transition:.675s;
	transition:.675s;
}

#main p {
	font-family: "proximanova light";
	color: #000000;
	font-size: xx-large;
	text-align: center;
	width: 44%;
	margin-left: 50%;
	margin-right: auto;

}

<div class="link_affix">
    <div data-spy="affix" data-offset-top="0">
        <div class="nav">
          <ul>
              <li><a href="index.html" class="thispage">HOME</a></li>
               <li><a href="resume.html">RESUME</a></li>
               <li><a href="projects.html">PROJECTS</a></li>
               <li><a href="contact.html\n">CONTACT </a></li>
          </ul>
        </div> 
	</div> <!-- affix -->
</div>


<article id="main">
  <p>
example textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample 
</p>

</article>

我的目标是实现两件事:

1. 将文本和导航栏居中。

2. 向窗口两端延伸边框。 (就像 stackexchange 一样)。

我进行了研究并尝试了很多方法，但都无济于事。我将不胜感激。

Answer 1

通过添加以下样式，您应该能够将中殿居中并使其分布在整个屏幕上:

.affix {left:0; right:0;}

Updated fiddle