$lato : 'Lato' $pt : 'PT' $text_color : rgb( 10, 13, 16 ) $text_white_color : #f1f0f0 $red_color : #c61b2b $black_color : #0a0d10 /**/ $xs: 0px $sm: 575px $md: 767px $lg: 991px $xl: 1199px * margin: 0 padding: 0 .main__wrapper width: 100% //header header margin: 0 2.64% display: flex justify-content: space-between align-items: center padding: 18px .header__right-info display: flex align-content: space-between flex-direction: column align-items: flex-end .right-info__light-menu display: block img display: inline-block margin-left: 1% ul display: inline-block li display: inline-block margin-left: 1.05% a text-decoration: none color: #5c5f62 .right-info__huge-menu display: flex nav ul li display: inline-block margin-left: 2.95% a text-decoration: none color: $black_color font-size: 14px font-family: $lato font-weight: 700 text-transform: uppercase 
 <main class="main__wrapper"> <header> <div class="header__logo"> <img src="img/additional/main_logo.png" alt="logotype"> </div> <div class="header__right-info"> <div class="right-info__light-menu"> <img src="img/additional/search_ico.png" alt="search_icon"> <img src="img/additional/profile_ico.png" alt="profile_icon"> <ul> <li><a href="#">Eng</a></li> <li><a href="#">О ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅</a></li> <li><a href="#">На сайт музСя</a></li> </ul> </div> <div class="right-info__huge-menu"> <nav> <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> <li><a href="#">ΠšΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚Ρ‹</a></li> <li><a href="#">ВСматичСскиС Π°Π»ΡŒΠ±ΠΎΠΌΡ‹</a></li> <li><a href="#">ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ</a></li> </ul> </nav> </div> </div> </header> </main>

https://codepen.io/anon/pen/dmeMjz - Sandbox

Why do the two menus go to a new line, although there is a place, if you remove indents, there is no such thing.

Problem screenshot: enter image description here

And another question, how to make two men push each other by the same distance without using the margin ? There is such a property as align-content: space-between , but it doesn't help (In the screenshot, this indent is made by margina'ΠΌΠΈ

enter image description here

    1 answer 1

    The question is posed badly, but still.

    one)

     .header__right-info { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; min-height: 160px; }

    for column and space-between - we control the distance between the light-menu huge-menu using the height.

    2) right-info__light-menu - if we are talking about it, then it does not have enough space. As an option to add him display: flex. Or just min-width: 430px;

    • And what about the fact that the menu items go to a new line? Although there is still a lot of space - uzi_no_uzi
    • Completed the answer. - Profet