title: How to align logo at left and navigation on right side?
body: <p>How to align the logo to my navigation bar?</p>
  
  <p>My HTML code is:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;link rel="icon" type="image/png" href="SENCOR_Logo.ico"&gt;
  &lt;title&gt;SENCOR&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="bg-div"&gt;
      &lt;img class="logo-img" src="SENCOR_Logo.jpg" ALT="align box" ALIGN=CENTER&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Monitoring&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Process&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Post and Create Email/Excel&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Tools&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sales&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and heres my style.css code:</p>
  
  <pre><code>body{
      margin: 0;
      padding: 0;
      font-size: 15px;
  }
  
  /* Navigation */
  nav{
      margin: 0;
      overflow:hidden;
      text-align: center;
  }
  
  nav ul{
      margin: 0;
      padding: 0;
  }
  
  nav ul li{
      display: inline-block;
      list-style-type: none;
  }
  
  nav &gt; ul &gt; li &gt; a{
      color: #aaa;
      display: block;
      line-height: 2em;
      padding: 0.5em 1em;
      text-decoration: none;
  }
  -----------
  .logo-img{
      position: relative;
      margin: 10px 15px 15px 10px;
  }
  .bg-div{
      background:#333;
  }
  </code></pre>
  
  <p>I want to display the logo at the left side and the navigation bar to the right side.</p>