How i place the menu on the right side of the container?

May 20, 2024

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.

>Solution :

To align the the Nav buttons and the Order buttons to the right, we’d need to make sure that the logo takes most space in the flexbox. This is acheived using the flex-grow: 1 parameter. Another thing that we’d need to modify is the fact that the width parameter is 100% for the container class and that prevents the logo from growing as much as possible (the flex-grow: 1 parameter, remember?).

I have modified your CSS file and I’ll add the code sample below. Also, it’s preferable to have your content inside the <body></body> tags. Though it doesn’t cause a problem in this case, it’s recommended we follow the standards.

Lastly, Please Upvote and Accept this answer if it worked for you. Welcome to StackOverflow!

* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

header {
  height: 90px;
  background-color: #262626;
  display: flex;
  align-items: center;
  padding: 0 20px; /* Add padding for spacing */
}

.logo {
  text-decoration: none;
  color: white;
  font-size: 27px;
  font-weight: 600;
  text-transform: uppercase;
  flex-grow: 1;
}

.logo span {
  color: orange;
}
.container {
  max-width: 1250px;
  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;
}

<!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="./styles.css">
</head>

<body>
  <header>
      <div class="logo">QUICK<span>Pizza</span></a></div>  
      <div class="container">          
        <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>
<footer></footer>