Looking at my HTML code below, I am trying to reposition the 'site-logo' and 'nav-search-wrapper' div elements to the left side of the parent div (top-nav) and have the 'list' div element appear on the right side. However, they are currently all stacked up together on the left side of the page.
<!DOCTYPE html>
<html>
<head>
<title>AirBnB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Top Nav -->
<div class="top-nav">
<div class="site-logo">
<a href="index.html" class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg" alt="AirBnB">
</a>
</div>
<div id="nav-search-wrapper">
<form action="#" method="GET">
<input type="text" name="search" id="nav-search" placeholder="Search">
</form>
</div>
<div class="list">
<ul>
<li><a href="">Become A Host</a></li>
<li><a href="">Help</a></li>
<li><a href="">Sign Up</a></li>
<li><a href="">Log In</a></li>
</ul>
</div>
</div>
</body>
</html>
Presenting my custom CSS:
/* Customized CSS */
body{
padding: 0px;
margin: 0px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #484848;
line-height: 1.43;
}
p{
font-size: 16px;
margin: 0px;
padding: 0px;
}
a: link{
font-size: 16px;
text-decoration: none;
margin: 0px;
padding: 0px;
}
a: visited{
text-decoration: none;
padding: 0px;
margin: 0px;
}
h1, h2, h3, h4, h5, h6, ol, ul, li{
margin: 0px;
padding: 0px;
}
ul, ol{
list-style-type: none;
}
::selection{
color: #fff;
background-color: #333;
}
::-moz-selection{
color: #fff;
background-color: #333;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
/* Top Nav Styling */
.top-nav{
position: fixed;
width: 100%;
height: auto;
border-bottom: 1px solid #ccc;
display: flex;
}
.site-logo{
float: left;
}
.logo:link{
color: #484848;
display: inline-block;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.logo:hover {
background-color: #f1f1f1;
}
.logo:visited{
color: #484848;
}
.logo img{
padding: 12px 18px;
width: 100px;
vertical-align: middle;
border-right: 1px solid #ccc;
}
#nav-search-wrapper{
float: left;
display: inline-block;
width: 490px;
height: 100%;
}
#nav-search-wrapper form input{
box-sizing: border-box;
padding: 22px 10px 18px 52px;
width: 100%;
border: none;
}
#nav-search-wrapper form input::-webkit-input-placeholder{
color: #666;
font-size: 14px;
}
.top-nav .list{
float: right;
border: 1pt solid black;
}
.top-nav .list li{
display: inline-block;
line-height: 52.547px;
}
.top-nav .list ul{
height: 100%;
}
Any suggestions on how to correctly adjust the positioning of the 'list' div element to the right side, while moving the other two div elements to the left within the top-nav parent element?
Current layout shown here. (The Airbnb Logo is a placeholder image in this learning project) https://i.stack.imgur.com/x0Dcg.png