Hello. In the new layout, I found a layout to practice, but then there were difficulties already in the header of the site. There is a logo on the left, in the middle of the menu and on the right a telephone and feedback button.

Site header That's what happened with me

@font-face { font-family: 'Roboto Slab'; src: url('../fonts/RobotoSlabBold.eot'); /* IE9 Compat Modes */ src: url('../fonts/RobotoSlabBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/RobotoSlabBold.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/RobotoSlabBold.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/RobotoSlabBold.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/RobotoSlabBold.svg#svgFontName') format('svg'); /* Legacy iOS */ } body { padding: 0; margin: 0; font-family: 'Roboto Slab'; font-size: 15px; font-weight: normal; width: 100%; } header { width: 1500px; margin: 0px auto; } header li { display: inline-block; vertical-align: top; background: red; } .header__feedback { display: inline-block; background: red; float: right; width: 200px; height: 80px; } .header__logo { display: inline-block; background: red; float: left; } .header__feedback_icon img { width: 18px; float: left; } 
 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Тренировка</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <nav> <div class="header__logo"> <img src="img/logo2.png" alt="Logo"> </div> <div class="header__menu_list"> <ul> <li><a href="#">Инфраструктура</a></li> <li><a href="#">Планировки и цены</a></li> <li><a href="#">Материалы и отделка</a></li> <li><a href="#">Документы</a></li> <li><a href="#">Контакты</a></li> </ul> </div> <div class="header__feedback"> <div class="header__feedback_number"> + 7 (495) 544-23-12 </div> <div class="header__feedback_icon"> <img src="img/icon_phone.png" alt="icon"> </div> <div class="header__feedback_button"> <a href="#">Заказать звонок</a> </div> </div> </nav> </header> </body> </html>

I need the feedback box to the right. But for some reason he becomes below the list. And there is an incomprehensible indent from above, although the body has zero indents. How to solve the problem please advise ..

    1 answer 1

     .header__menu_list { display: inline-block; }
    • Thank! Helped!)) I understand that in order to line up a few blocks, you need to set display: inline-block to everyone? - Roman
    • @Roman, .header__menu_list tag is defaulted to block, which means the width of the block occupies the entire width of the parent, since it stands after the logo that has a float, it is positioned from him - Bert