Hi there! Currently, I am in the process of creating a navigation bar for a website but I am facing an issue where the logo and navigation elements are not covering the entire width of the browser. My goal is to have the logo aligned to the far left and the list elements aligned to the far right.
Here is the HTML code snippet:
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons-5.4.0.designerpack%20copy">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<title>moBurgerz</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="Resources/img/moBurgerzLogo.png" class="logo">
<ul class="main-nav">
<li><a href="#">About</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="hero-text">
<h1>BEST BURGERS IN <br> DA City.</h1>
<a class="btn btn-full"href="#">I'm hungry</a>
<a class="btn btn-empty"href="#">Show me more</a>
</div>
</header>
<section class="story">
<div class="row">
<h2>Our Story</h2>
<p>moBurgerz was established in the summer of 2017 in the DMV. Since than we have grown tremendously with the help of our customers. Every burger is made with love. Come join us and see what the hype is about.</p>
</div>
</section>
</body>
</html>
css:
/*---------------------*/
/*BASIC SETUP*/
/*---------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
font-family: 'Lato','sans-serif','arial';
color: #fff;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
section {
padding: 80px 0;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
h2 {
text-align: center;
margin: 0;
padding-top: 20px;
font-size: 25px;
}
/*------------------------*/
/*Navigation*/
/*------------------------*/
header {
background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url("img/truck.jpg");
background-size: cover;
background-position: center;
height: 100vh;
}
.logo {
height: 100px;
float: left;
width: auto;
margin-top: 10px;
}
.hero-text {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main-nav {
list-style: none;
float: right;
margin-top: 55px;
}
.main-nav li {
color: #fff;
display: inline-block;
margin-left: 40px;
}
.main-nav li a:hover,
.main-nav li a:link, {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.main-nav li a:visited,
.main-nav li a:active, {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.story {
color: #5d5a5a;
}