I'm struggling with getting my navigation menu to align on the left side and the search box on the right side within the navigation bar. My CSS code doesn't seem to be working properly. Can someone please assist me in resolving this issue?
Here is my HTML Code:
<html>
<head>
<body>
<div id= navigation>
<ul>
<li> <a href="index.html">Home</a></li>
<li><a href="Contact.html">Contact Us</a></li>
</ul>
<div id= form>
<form method = post action="" >
<input type="text" class= "form control" placeholder="Search">
<button class="button" type="Submit">Submit</button>
</form>
</body>
</html>
CSS code :
#body{#width:500px}
#navigation {
float:left;
background: #1b1c1d;
width: 960px;
}
#navigation ul {
list-style: none;
list-style-position: outside;
font-size: 25px;
font- weight: 200;
}
#navigation ul li {
display: inline; padding: 8px 12px;
line-height: 40px;
}
#navigation ul li a {
color: #d5d4d4;
text-decoration: none;
}
#navigation ul li a:hover,
#navigation ul li.active a {
color: #fff;
text-decoration: none;
line-height: 40px;
}
#from{
width:280px;
float: right;
padding-top: 20px;
}