There is a header with a string menu (horizontal), a logo and one button. It is necessary that the string menu is in the middle, the logo on the left, and the button on the right.
This is all in one <div> block.

Closed due to the fact that the question is not clear to the participants of the freim , Air , Stranger in the Q , LFC , entithat March 17 at 8:48 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

    2 answers 2

     .item { width: 50px; height: 50px; background-color: pink; } .container { display: flex; justify-content: space-between; } 
     <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

    • It's not entirely clear if the author wanted exactly this, but I would say the same way, catch a plus - LFC
    • one
      Added option with grid . I waited for you to add, but did not wait) - LFC

    Here you can do it in several ways. The first as wrote in the answer @meine - using flexbox , the following method using the grid , you can also use ready-made solutions, using for example the same Bootstrap 4.
    Here is the grid option:

     .grid-container { display: grid; grid-template-areas: 'logo grid-menu button'; align-content: center; } .grid-container > div { background-color:#b1db08; text-align: center; padding: 15px 0; font-size: 14px; } .logo { grid-area: logo; } .grid-menu { display: grid; grid-area: grid-menu; grid-template-columns: auto auto auto auto auto; align-content: center; } .menu-item { background-color: #d7db08; text-align: center; padding: 5px; font-size: 14px; border: 1px solid gray; } .button { grid-area: button; } .bt { padding: 5px; } 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <div class="grid-container"> <div class="logo"><i class="material-icons">cloud</i></div> <div class="grid-menu"> <div class="menu-item">Главная</div> <div class="menu-item">Новости</div> <div class="menu-item">О нас</div> <div class="menu-item">Контакты</div> <div class="menu-item">Акции</div> </div> <div class="button"> <button class="bt">Click</button> </div> </div>

    Strongly with styles not played, the main thing is to show the principle, the rest is a matter of taste.

    • one
      Catch the plus sign :-) - meine