Tell me how to make the left border of the .logo above the left border of the menu, and the right border of the header above the right border of the menu. Thank.

enter image description here Now these three elements have the following styles:

 .header { display: inline-block; max-width: 500px; margin: auto; padding: auto; } .logo { display: inline-block; position: absolute; top: 0; left: 25%; } .name { display: inline-block; max-width: 700px; line-height: 70px; position: absolute; top: 0; right: 25%; padding: 5px; font-family: sans-serif; font-size: 36px; } .menu { margin-top: 100px; max-width: 800px; margin-left: auto; margin-right: auto; padding: auto; border: 1px solid black; }
  • one
    Why don't you make one width for both the menu and the title? And then align the logo and name along the edges? - Yuri
  • padding: auto - there is no such property. There is padding: [top, right, bottom, left] - soledar10

2 answers 2

If .logo and .name are inside .header , set the width and indents (margins) for the .menu class to the same style as the .menu class.

The meaning is:

 .header { clear: both; margin: 0 auto; width: 800px; } .logo { float: left; } .name { float: right; } .menu { width: 800px; margin: 100px auto; padding: auto; border: 1px solid black; }
  • .header will have a height of 0 due to the fact that its child elements have a float . Set the height of the block .header - Yuri
  • @Yuri, or clear: both; :) - check1st
  • check1st, yes. Only for me, for some magical reason, it does not always work) - Yuri

The solution is using flexbox, which solves the problems of vertical centering and simplifies the definition of articles:

 .header { display: flex; flex-wrap: wrap; margin: 0 auto; align-items: center; padding: 0 5%;; } .logo { background-color: orange; width: 40px; height: 40px; } .name { font-size: 24px; margin-left: auto; } .menu { display: flex; border: 1px solid #000; width: 100%; } .menu-item { flex-grow: 1; text-align: center; padding: 10px; } 
 <div class="header"> <div class="logo"> </div> <div class="name"> Π Π΅ΠΉΡ‚ΠΈΠ½Π³ студий ΠΌΠ°Π½ΠΈΠΊΡŽΡ€Π° ΠœΠΎΡΠΊΠ²Ρ‹ </div> <div class="menu"> <div class="menu-item"> Π Π΅ΠΉΡ‚ΠΈΠ½Π³ </div> <div class="menu-item"> ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹ </div> </div> </div>