According to the theory, it should add up to 2 lines, but only one word is transferred

.header__container {
  align-items: center;
  min-height: 115px;
  .header_logo {
    padding: 23px 20px 0 0
  .logo {
    flex: 0 1 220px;
  .logo_item {}
  .header_menu {}
  .menu {}
  .menu_list {
    flex-wrap: wrap;
  .menu_item {
    line-height: 115px;
  .menu__item:hover {
    border-bottom: 5px solid#11749e;
  .menu_link {
    font-weight: 800
    display: inline-block
    line-height: 28 /16 * 100%;
    color: #fff;
    text-decoration: none;
    min-width: 77px;
    padding: 015px;
    height: 115px;
    line-height: 115px;
  .header_social {}
  .social header {
    flex: 1 1 auto;
    justify-content: flex-end;
  .social-header_link {
    justify-content: flex-end;
    margin: 0 30px 0 0;
  .social-header__link:last-child {
    margin: 0;
  .social-header__fb {}
  .social-header__tw {}
  .social-header__sk {}
  .social-header_in {}
<div class='header__container _container'>  <div class="header_logo logo">    <a href="#" class="logo__item"><img src="img/first/Logo.png" alt=""></a>  </div>  <nav class="header_menu menu">    <ul class="menu_list">      <li class="menu_item">        <a href="#" class="menu__link">Home</a>      </li>      <li class="menu_item">        <a href="#" class="menu__link">Pages</a>      </li>      <li class="menu_item">        <a href="#" class="menu__link">Features</a>      </li>      <li class="menu_item">        <a href="#" class="menu__link">Extensions</a>      </li>      <li class="menu_item">        <a href="#" class="menu__link">Tutorials</a>      </li>      <li class="menu_item">        <a href="#" class="menu__link">Contact us</a>      </li>    </ul>  </nav>  <div class="header_social social-header">    <a href="#" class="social-header__link"><img src="img/first/fb.png" alt="" class="social-header__fb"></a>    <a href="#" class="social-header__link"><img src="img/first/tw.png" alt="" class="social-header__tw"></a>    <a href="#" class="social-header__link"><img src="img/first/sk.png" alt="" class="social-header__sk"></a>    <a href="#" class="social-header__link"><img src="img/first/in.png" alt="" class="social-header__in"></a>  </div></div>

Post the complete code. Now it is not clear from the description what exactly the problem is, but it is also not clear from the code. I tried to change the width of .menu__list in your code, then the elements inside are normally transferred to the next line.

novvember2022-02-15 09:36:13


Александр Гриценко2022-02-14 11:55:14