.wrapper { max-width: 1180px; } .container-fluid { width: 100%; } header .logo a { color: #00c853; font-size: 32px; cursor: pointer; text-decoration: none; } header .nav ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } header .nav ul li { text-decoration: none; list-style: none; } header .nav ul li a { color: #000; padding-right: 12px; text-decoration: none; font-size: 14px; } header .nav ul li a:hover { color: #000; } header .tel { font-size: 18px; color: #000; } header .tel i { padding-right: 5px; } 
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <header> <div class="container-fluid wrapper"> <div class="row align-items-center justify-content-between"> <div class="col-lg-auto logo"> <a href="#">Logo</a> </div> <div class="col-lg-auto 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> </ul> </div> <div class="col-lg-auto tel"> <i class="fas fa-phone"></i> +38(111)111-11-11 <button>Перезвонить</button> </div> </div> </div> </header>

    2 answers 2

    align-items-center works, the menu list needs to be zeroed margin/margin-bottom . Because of this, the height of the nav block is greater and it seems to you that there is no alignment.

    • Added margin-bottom: 0 in li anyway nav above - Mighty
    • @Mighty, li is an element of the list, and ul is a list, so you need to reset the margin from it - E_K
    • Yes, thanks, it helped, but now a new problem in gulp makes an error when I write margin-bottom: Invalid CSS after "marging: 0px": expected "{", was "" - Mighty
    • @Mighty, it means you have an error in styles. The error most likely indicates the file where and even the line number - E_K
    • prntscr.com/lat6z1 It then writes, but I can not find a solution to this problem. One of the options that I found is to change the file extension with .sass and .scss, but I think there are other ways to solve it. I apologize for asking questions. - Mighty

    Aligns.

    You have an average block worth of classes col-lg-auto nav

    Also in other blocks worth

    col-lg-auto tel and col-lg-auto logo

    The problem is that this nav which is next to the col-lg-auto is the name of the Boostrap class. If you change it to something else, you will have a semantically correct layout and the class names will not conflict.

     .wrapper { max-width: 1180px; } .container-fluid { width: 100%; } header .logo a { color: #00c853; font-size: 32px; cursor: pointer; text-decoration: none; } header .navigation-center ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } header .navigation-center ul li { text-decoration: none; list-style: none; } header .navigation-center ul li a { color: #000; padding-right: 12px; text-decoration: none; font-size: 14px; } header .navigation-center ul li a:hover { color: #000; } header .tel { font-size: 18px; color: #000; } header .tel i { padding-right: 5px;[![введите сюда описание изображения][1]][1] } 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <header> <div class="container-fluid wrapper"> <div class="row align-items-center justify-content-between"> <div class="col-lg-auto logo"> <a href="#">Logo</a> </div> <div class="col-lg-auto navigation-center"> <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="col-lg-auto tel"> <i class="fas fa-phone"></i> +38(111)111-11-11 <button>Перезвонить</button> </div> </div> </div> </header>

    • Changed nav to navline - it still did not help ( - Mighty