Fixing ul to right of bootstrap navbar - html

Question

Disclaimer: Pardon my stupidity when it comes to coding. I started learning last week.
I have been tinkering around with a Bootstrap 3 template from a Youtube tutorial I found to assist me in learning HTML, CSS, and eventually Java. In this example I'm working on, I am trying to get the inline unordered list to float to the right of the page. I tried adding float:right to most of the navbar elements in the CSS, but it's not doing anything for me. Any help would be greatly appreciated.
HTML:
<div class="navbar navbar-fixed-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="inactive">
Photos
</li>
<li class="inactive">
Videos
</li>
<li class="inactive">
Contact Us
</li>
</ul>
</div><!-- end nav-collapse -->
</div><!-- end container -->
</div><!-- end navbar -->
CSS:
.navbar {
position: relative;
min-height: 50px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px;
background-color: #eeeeee;
border-radius: 4px;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
.navbar-nav {
margin-top: 10px;
margin-bottom: 15px;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
color: #777777;
border-radius: 4px;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
color: #555555;
background-color: #d5d5d5;
}
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-nav.pull-right {
width: 100%;
}
.navbar-static-top {
border-radius: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
border-radius: 0;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
}
.navbar-brand {
display: block;
max-width: 200px;
padding: 15px 15px;
margin-right: auto;
margin-left: auto;
font-size: 18px;
font-weight: 500;
line-height: 20px;
color: #777777;
text-align: center;
}
.navbar-brand:hover,
.navbar-brand:focus {
color: #5e5e5e;
text-decoration: none;
background-color: transparent;
}
.navbar-toggle {
position: absolute;
top: 9px;
right: 10px;
width: 48px;
height: 32px;
padding: 8px 12px;
background-color: transparent;
border: 1px solid #dddddd;
border-radius: 4px;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}

Answer 1

As you are using Bootstrap, to so you may use class .pull-right to align it to right.
For more info click here.

Answer 2

In Bootstrap v 3.** it is better practice to use "navbar-right" so the proper context should read:
ul class = "nav navbar-nav navbar-right"

Answer 3

If you are using bootstrap 3 the use navbar-right to pull right h
jsfiddle.net/makk/9yxeg7r5/2 - this is a similar example
<div id="top"></div>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand" href="#top"><span class="fa fa-book fa-3x">MATH</span></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Features</li>
<li>Courses</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>