Apologies if this question seems trivial, but I have been struggling to find a solution for positioning my navigation bar on the right side of the container (prior to the order button). Despite hours of searching, I still haven't come across a viable fix.
HTML
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>quick Pizza</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<header>
<div class="container">
<div class="logo">QUICK<span>Pizza</span></a></div>
<div class="nav">
<a href="Home">Home</a>
<a href="Home">Menu</a>
<a href="Home">Contact</a>
</div>
<button class="order">Order Now</button>
</div>
</header>
<body>
</body>
<footer></footer>
CSS
*{
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
header {
height: 90px;
background-color: #262626;
display: flex;
align-items: center;
justify-content: space-between; /* Space between to separate logo and nav */
padding: 0 20px; /* Add padding for spacing */
}
.logo {
text-decoration: none;
color: white;
font-size: 27px;
font-weight: 600;
text-transform: uppercase;
}
.logo span {
color: orange;
}
.container {
max-width: 1250px;
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav {
display: flex;
align-items: center;
justify-content: right;
}
.nav a {
text-decoration: none;
font-size: 25px;
color: white;
text-align: center;
padding: 19px;
}
I attempted manipulating the float and flex properties, but it only affected the logo and order button, not my menu.