title: H1, Ul and H2 inline positioning with CSS
body: <p>I need to make responsive header with H1, UL menu and H2. 
  The H1 - about 5% from the left corner. The H2 - about 5% from right corner. And between them is UL menu, which I need to place in the center. Everything in one line... And HR line under this line. 
  How to position UL menu in the CENTER ?</p>
  
  <p><a href="http://jsfiddle.net/ynternet/rHhMt/" rel="nofollow">jsFiddle EXAMPLE</a></p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;header class="clearfix"&gt;
              &lt;!-- TITLE 1 --&gt;
              &lt;h1&gt;Title 1 &lt;/h1&gt;
              &lt;!-- UL --&gt;
              &lt;ul&gt;
                  &lt;li&gt; menu 1&lt;/li&gt;
                  &lt;li&gt; menu 2&lt;/li&gt;
                  &lt;li&gt; menu 3&lt;/li&gt;
              &lt;/ul&gt;
              &lt;!-- TITLE 2 --&gt;
              &lt;h2&gt;Title 2 &lt;br/&gt;&lt;span&gt;span&lt;/span&gt;&lt;/h2&gt;
  
          &lt;hr /&gt;
      &lt;/header&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.container &gt; header {
      width: 90%;
      margin: 0 auto;
      position: relative;
      padding: 40px 30px 20px 30px;
  }
  .container &gt; header h1 {
      padding-left: 5px;
      font-size: 30px;
      line-height: 37px;
      margin: 0 auto;
      font-weight: 700;
      color: #000;
      display:inline !important;
      float: left;
  }
  .container &gt; header h2 {
      padding-right: 5px;
      font-size: 14px;
      line-height: 14px;
      margin: 0px 0px 0px auto;
      font-weight: 700;
      color: #000;
      display:inline !important;
      float: right;
      text-align: right;
  }
  .container &gt; header h2 span {
      font-size: 10px;
      line-height: 11px;
      font-weight: 700;
      color: #000;
  }
  .container &gt; header ul {
      font-size: 10px;
      line-height: 11px;
      font-weight: 700;
      color: red;
  }
  .container &gt; header ul li {
      float: left;
      list-style-type: none;
      padding: 0px 5px 0px 5px;
  }
  .container &gt; header hr {
      border:0;
      color:#000;
      background:#000;
      height:1px;
      clear: both;
  }
  </code></pre>