How to align logo at left and navigation on right side?
<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>