Make spacing independent of other elements (CSS)-CodePudding

I have a logo on the far left. There is a div container in the middle and a div container on the far left. All packed together in a div container.

I have the middle container on margin: auto; adjusted so that it has the same distance on both sides.

The problem is, if I move the logo left or right, the middle container also moves. How can I ensure that the middle container always stays in the middle no matter what happens left or right?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Airbnb.com</title>
  <style>

    body {
      margin: 0%;
      font-family: Arial, Helvetica, sans-serif;
    }

    .container1 {
      height: 70px;
      background-color: #e7e0e0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .container12 {
      margin-left: 50px;
    }

    .container12 h1 {
      font-size: 20px;
    }

    .container13 {
      margin-right: 25px;
      
    }

    .container13 a {
      margin: 0%;
      text-decoration: none;
      color: black;
      float: inline-start;
    }

    .container13 a:hover {
      text-decoration: underline;

    }

    .trennlinie {
      border-right: 1px solid grey;
      padding-top: 15px;
      padding-bottom: 15px;
      padding-right: 12.5px;
    }

    .trennliniehilfe {
      padding-left: 12.5px;
      padding-top: 15px;
      padding-bottom: 15px;

    }

    .container2 {
      height: 80px;
      border-bottom: 1px solid rgb(187, 187, 187);
      display: flex;
      align-items: center;
      

    }

    .airbnblogo {
      width: 50px;
      
    }

    .airbnbcont {
      margin-left: 110px;
      ;
    

    }

    .mittecontainer {
      display: flex;
      margin: auto;
      float: inline-start;
      background-color: rgb(214, 212, 212);
      border: 2px solid black;
      border-radius: 15px;
      padding-right: 5px;
      
    }

    .mittecontainer p {
      margin-left: 11.5px;
    }

    .part3 {
      display: flex;
      align-items: center;
      margin-right: 35px;
     
    }

    .derretter {
margin-right: 15px;
    }


    

    .interneticon {
      margin-right: 15px;
      width: 30px;
    }

    .Pics img {
      width: 250px;
      vertical-align: middle;
    }

    .Pics {
      display: flex;
      justify-content: center;
      margin-top: 80px;
      border: 2px solid white;

      
      
    }

    .p1 {
      border-right: 1px solid grey;
      padding-right: 12.5px;


    }

    .p2 {
      border-right: 1px solid grey;
      padding-right: 12.5px;
    }

    .Pics p {
      display: flex;
      justify-content: center;
    }

    .pics2 {
      background-color: black;
      padding-right: 10px;
      padding-left: 10px;
      padding-top: 10px;
      border-radius: 10px;
    }

    .pics2 p {
      background-color: black;
      color: white;
      border: 2px solid white;
      border-radius: 15px;
      padding: 5px;
    }

    .pics2 p:hover {
      background-color: white;
      color: black;
    }

    .ia {
      width: 30px;
    }



  </style>
</head>
<body>
  <div >
<div >
      <h1>Hier kommt das Airbnb 2022: Winter-Update</h1>
    </div>
<div >
    <a  href="">Film abspielen</a>
    <a  href="">Alle Neuigkeiten entdecken</a>
    </div>

  </div>


<div >
<div >
<img  src="airbnb.png" >
</div>

<div >
  <p >Irgendwo</p>
  <p >Eine Woche</p>
  <p>Gäste hinzufügen</p>
</div>

<div > 

<div >
<p>Als Gastgeber:in loslegen</p>
</div>

<div >
<img  src="internet.png" alt="">

</div>

<div>
  <img  src="menu.png" alt="">
</div>


</div>

</div>



<div > 
  <div >
  <img src="din1.jpg"> <br>
  <p>Jetzt Flug sichern!</p>
  <p>Weitere Infos</p>
  <p>Standort</p>
</div>

</div>







  

</body>
</html>

CodePudding user response：

inside the .container2 class in the style tag, replace display: flex; be display: grid; and add grid-template-columns: 25% 50% 25%; like this

.container2 {
  height: 80px;
  border-bottom: 1px solid rgb(187, 187, 187);
  display: grid;
  grid-template-columns: 25% 50% 25%;
  align-items: center;
}

And don't forget if there are too many css styles, then make an external css link so that giving css styles is easier.