title: Centered Top Navigation Menu with 2 Elements
body: <p>Hi i'm encountering an absolute stupid problem. iam currently designing a website with an center which includes two elements, a logo and an navigation icon. Between these two things should be a space even if the site is resized due to a low resolution or a mobile device.</p>
  
  <p>but they are overlapping constantly! i have no idea what i could do...
  This is the current markup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="navContainer"&gt;  
      &lt;div id="topNav"&gt;
          &lt;div id="logo"&gt;&lt;img src="images/logo.png"/&gt; &lt;/div&gt;
          &lt;div id="mobileNav"&gt;&lt;a  href="#" &gt;&lt;img id="hamburger" src="images/navIcon.png"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p> </p>
  
  <p>and its styling:</p>
  
  <pre class="lang-css prettyprint-override"><code>#navContainer {margin:0 auto;}
  #navContainer:hover{background: rgba(255,255,255,0.2);cursor: pointer; width:100%;}
  #topNav{width:50%; margin:0 auto;}
  #logo{text-align:left; min-width:250px;}
  #mobileNav{text-align:right; position:relative; bottom:50px; }
  </code></pre>
  
  <p>my goal is to get the navigation working like: <a href="http://www.teehanlax.com/" rel="nofollow">http://www.teehanlax.com/</a></p>