How can I put content to the right of my bootstrap nav

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.

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;
}

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Home</title>
</head>  
<body>
    <div class="container-fluid">
            <ul class="nav nav-pills nav-stacked" role="tablist">
                    <li class="active"><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="contact.html">Contact</a></li>        
            </ul>
    </div>
</body>
</html>

Solution

This is a continuation to the above question. If you want to make any bottstrap design responsive i.e if you want it to look same in all screen size you should use these classes col-md-4 col-lg-4 col-sm-4 col-xs-4 together. Also I have used col-lg-offset-1 offset classes as it will create a automatic margin(margin of 1 column in this case) between your elements and the design will look good.

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: 50px;
}

.nav{
    width: 200px;
}

.main{
     margin-top:50px;
  }

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Home</title>
</head>  
<body>
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
  </div>
</nav>
  
    <div class="container-fluid">
       <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
            <ul class="nav nav-pills nav-stacked" role="tablist">
                    <li class="active"><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="contact.html">Contact</a></li>        
            </ul>
      </div>
      <div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1  col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main">
             Main content goes here
      </div>
    </div>
</body>
</html>

Hope this helps!