title: Fixing my navigation bar
body: <p>I'm working on a navigation bar and am having a problem. This is my current <a href="http://i.stack.imgur.com/EmeVh.png" rel="nofollow">output</a>. I'm floating the group on the right to the right, but I want everything to be on the same row. How do I do this? </p>
  
  <pre><code>nav {
  margin: 0px 10%;
  }
  #floatedright {
  float: right;
  }
  #floatedright &gt; li {
  float: left;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;section id="headercontainer"&gt;
    &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;PiercaNrla&lt;/a&gt;&lt;/li&gt;
          &lt;section id="floatedright"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  </code></pre>