HTML nav bar how to align search bar to right side of screen
<p>I'm coding a webpage in HTML and I am trying to figure out how to align the search bar to the right side of the navigation bar. Below is my HTML used for the nav bar, as well as the CSS code. </p>

<p>HTML:</p>

<pre><code>&lt;div class="naviagion"&gt;
        &lt;div class="col-md-10 col-md-offset-1" id="test"&gt;
            &lt;ul class="nav nav-pills"&gt;
                &lt;li class="page-title"&gt;&lt;a href="index.html"&gt;&lt;h4&gt;Josh's Blog&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li class="menu-item"&gt;&lt;a href="source/posts.html"&gt;Blog Posts&lt;/a&gt;&lt;/li&gt;
                &lt;li class="menu-item"&gt;&lt;a href="source/projects.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
                &lt;li class="menu-item"&gt;&lt;a href="source/about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li class="menu-item"&gt;&lt;a href="source/contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;!-- Search Bar --&gt;
                &lt;li id="search-bar" align="right"&gt;
                    &lt;form class="navbar-form navbar-left" role="search"&gt;
                        &lt;div class="form-group"&gt;
                            &lt;input type="text" class="form-control" placeholder="Search"&gt;
                        &lt;/div&gt;
                    &lt;button type="submit" class="btn btn-default"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/button&gt;
                    &lt;/form&gt;
                &lt;/li&gt;


            &lt;/ul&gt;&lt;br&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>    #search-bar {
    margin-top: 19px;
}

.page-title {
    padding-right: 50px;
    margin-top: 17px;
}

.menu-item {
    margin-top: 25px;
}

#test {
    background-color: #f1f1f1;
}

.active {
    margin-top: 25px;
}

/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}

/* Set gray background color and 100% height */
.sidenav {
  background-color: #f1f1f1;
  width: 100%;
}

/* Set black background color, white text and some padding */
footer {
  background-color: #555;
  color: white;
  padding: 15px;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
  .sidenav {
    height: auto;
    padding: 15px;
  }
  .row.content {height: auto;} 
}
</code></pre>