I know this quesition sounds stupid, but i cant find a solution for placing my nav bar on the right side of the container (before the order button). I`m searching for hours, but im unable to find a working solution.
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">Menü</a>
<a href="Home">Kontakt</a>
</div>
<button class="order">Jetzt bestellen</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 tried to play with the float and flex properties but i changed the logo and order button, not my menu.
New contributor
lowroller96 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.