title: How can I put content to the right of my bootstrap nav
body: <p>So I just recently started using bootstrap, and I created navigation buttons. But for some reason I can't put any content to the right of the buttons. I would like to have a section for content to the right of the buttons with a black background.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      overflow: hidden;
      background-color: #1C213D;
  }
  
  ul li{
      position: relative;
      text-align: center;
      list-style: none;
      display: block;
      color: lightsteelblue;
      font-size: 20px;
      padding-top: 12px;
      padding-bottom: 12px;
      margin-top: 200px;
  }
  
  .nav{
      width: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
      &lt;title&gt;Home&lt;/title&gt;
  &lt;/head&gt;  
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
              &lt;ul class="nav nav-pills nav-stacked" role="tablist"&gt;
                      &lt;li class="active"&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="projects.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;        
              &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>