title: How to move CSS navbar elements to the right?
body: <p>For an online course I was taking I created a web app through heroku</p>
  
  <p>Here is the site: <a href="http://sportmem.herokuapp.com/#" rel="nofollow">http://sportmem.herokuapp.com/#</a></p>
  
  <p>In the top I have a navigation bar with elements for home, about, faq, contact, login and register</p>
  
  <p>I would like to move the login and register elements to the right of the navigation bar so the login drop-down menu looks nicer</p>
  
  <p>here is the code I tried</p>
  
  <pre><code>&lt;div class = "navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class = "navbar-inner"&gt;
        &lt;div class = "container"&gt;
          &lt;button type = "button" class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse"&gt;
            &lt;span class = "icon-bar"&gt;&lt;/span&gt;
            &lt;span class = "icon-bar"&gt;&lt;/span&gt;
            &lt;span class = "icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class = "brand" href = "#"&gt;&lt;span class = "SportMem-sport"&gt;Sport&lt;/span&gt;&lt;span class = "SportMem-mem"&gt;Mem&lt;/span&gt;&lt;/a&gt;
          &lt;div class = "nav-collapse collapse"&gt;
            &lt;ul class = "nav"&gt;
              &lt;li class = "active"&gt;&lt;a href = "#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "/about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "/faq"&gt;FAQs&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li class = "login"&gt;
            &lt;a id = "login-start" href = "#"&gt;
           Login&lt;span&gt;&lt;/span&gt;
            &lt;/a&gt;
            &lt;div id = "login-form"&gt;
          &lt;form&gt;
            &lt;fieldset id = "inputs"&gt;
              &lt;input id = "username" type = "email" name = "Email" placeholder = "Email Address" required&gt;
              &lt;input id = "password" type = "password" name = "Password" placeholder = "Password" required&gt;
                    &lt;/fieldset&gt;
            &lt;fieldset id = "actions"&gt;
              &lt;input type = "submit" id = "submit" value = "Log-in"&gt;
              &lt;label&gt;&lt;input type = "checkbox" checked = "checked"&gt; Keep me logged-on&lt;/label&gt;
                    &lt;/fieldset&gt;
                  &lt;/form&gt;
                &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class = "register.html"&gt;&lt;a href = "#register"&gt;Register&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>i tried floating the elements to the right among others but nothing I've tried worked</p>
  
  <p>Could someone please find me a solution?</p>
  
  <p>Help is greatly appreciated</p>
  
  <p>Edit: Here is the entire CSS code in case you're wondering</p>
  
  <pre><code>&lt;style type = "text/css"&gt;
        @media (min-width: 980px) {
          body {
            padding-top: 60px;
          }
          .linediv-l {
            border-right: 3px #DAA520 solid;
          }
          .linediv-r {
            border-left: 3px #DAA520 solid;
          }
        }
  
        @media (max-width: 480px) {
          .copy {
            padding: 2.5% 10%;
          }
          .linediv-l {
            border-bottom: 3px #DAA520 solid;
          }
          .linediv-r {
            border-top: 3px #DAA520 solid;
          }
        } 
  
        a:hover {
          text-decoration: none;
          color: gold;
        }
  
        a:link {
          text-decoration: none;
          color: black;
        }
  
        a:visited {
          text-decoration: none;
          color: black;
        }
  
       .navbar {
          position: fixed;
        }
  
        #login-form {
          display:none;
          position: absolute;
        }
  
        ul &gt; li {
          display: inline;
          color: white;
        }
  
        body {
          background-color: #A52A2A;
          font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        }
  
        .heading, .subheading {
          font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
          text-align: center;
        }
  
        .brand {
          display: inline;
        }
  
        .SportMem-sport {
          color:#DAA520;
        }
  
        .SportMem-mem {
          color: #32CD32;
        }
  
        .subheading {
          font-style: italic;
          font-size: 12px;
        }
  
        p.lead {
          padding-top: 1.5%;
          line-height: 30px;
        }
  
        p {
          font-size: 18px;
          line-height: 24px;
        }
  
        .pitch {
          padding: 2.5% 0%;
        }
  
        .order {
          padding: 2% 0%;
        }
  
        .actions {
          background-color: #343434;
          padding: 3% 0%;
          border: 5px solid #00008B;
        }
  
        .actions:hover {
          border: 5px solid #4B0082;
        }
  
        img {
          border: 5px solid #006400;
        }
  
        img:hover {
          border: 5px solid #DAA520;
        }
  
        .video, .thermometer, .order, .social, .statistics {
          text-align: center;
        }
  
        .statistics h3, .statistics p {
          color: white;
        }
  
        .copy {
          padding-top: 2.5%;
          padding-bottom: 2.5%;
          text-align: justify;
        } 
  
        .asset {
          padding: 2.5% 0%;
        }
  
        h3 {
          text-align: center;
          color: #FFD700;
          text-shadow: 2px 2px #00008B;
        }
  
        h3:hover {
          color: #20B2AA;
          text-shadow: 2px 2px #F8F8FF;
        }
  
        .footer li {
          color: #cccccc;
          text-align: center;
          display: inline;
        }
  
        div.addthis_toolbox {
          width:180px;
          margin: 0 auto;
        }
  </code></pre>
  
  <p>there is no float:left found</p>
  
  <p>I don't know how that guy figured it out</p>