How can I position my logo to the left of the navigation bar?
This is my current HTML code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
<img class="logo-img" src="SENCOR_Logo.jpg" ALT="align box" ALIGN=CENTER>
<nav>
<ul>
<li><a href="#">Monitoring</a></li>
<li><a href="#">Process</a></li>
<li><a href="#">Post and Create Email/Excel</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Sales</a></li>
</ul>
</nav>
</div>
</body>
</html>
Here is the CSS code I'm using:
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 > ul > li > 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;
}
I would like the logo to be on the left side and the navigation bar on the right. How can I achieve this?