title: CSS in my header, the menu overlaps the logo
body: <p>my page is running at bee-barcelona.herokuapp.com</p>
  
  <p>I have the problem that the menu is running into the logo, once I resize the browser or open the page on the tablet. I want to clear it with CSS. How do I have to set it up that the elements don't overlap?</p>
  
  <p>This is my current CSS for the header:</p>
  
  <pre><code>header {
    background-color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));
    background: -moz-linear-gradient(top,  #555, #222);
    color: #FFFF00;
    font-weight: bold;
    position: relative;
    padding: 22px 100px;
    #logo {
      margin: 0;
      font-size: 36px;
    }
    a {
      color: #ffc400;
      text-decoration: none;
    }
    ul {
      position: absolute;
      right: 100px;
      top: 18px;
      list-style: none;
      margin: 0;
      li {
        float: left;
        padding: 2px 10px;
        border-right: solid 2px #6F6F6F;
        &amp;.last {
          border-right: none;
        }
      }
    }
  }
  .language {
      float:right;
      padding-bottom: 10px;
      }
  </code></pre>
  
  <p>And this is the HTML for the header:</p>
  
  <pre><code>&lt;h1 id='logo'&gt;
    &lt;%= link_to Refinery::Core.site_name, refinery.root_path %&gt;
  &lt;/h1&gt;
  &lt;%= Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self).to_html %&gt;
  &lt;div class="language"&gt;
  &lt;%= link_to image_tag("cat.png"),refinery.url_for(:locale =&gt; :ca) %&gt;
  &lt;%= link_to image_tag("esp.png"),refinery.url_for(:locale =&gt; :es) %&gt;
  &lt;%= link_to image_tag("eng.png"),refinery.url_for(:locale =&gt; :en) %&gt;
  &lt;/div&gt;
  </code></pre>