Что нужно сделать, чтобы иконки в хэдере при уменьшении экрана не сдвигались в след за хэдером?

Question

Хотелось бы, чтобы иконки оставились посередине хэдера. Вот, как они стоят и чтобы оставались на своих местах при уменьшении экрана.

body {
  background-color: white;
  margin: 0;
  width: 100%;
}

.rectangle {
  width: 100%;
  height: 60px;
  background: linear-gradient(41deg, rgba(31,128,219,1) 0%, rgba(20,66,125,1) 96%);
  border: 0px solid black;
  position: fixed;
  z-index: 999;
}

.header_line_construction {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  text-align: center;
  position: relative;
  max-height: 100px;
}

.icon_menu { 
  grid-area: 1 / 1 / 2 / 2;
}

.icon_menu_header {
  display: flex;
  justify-content: left;
}

.logo_surgpu { 
  grid-area: 1 / 3 / 2 / 4;
}

.logo_surgpu_header {
  display: flex;
  justify-content: center;
}

.contact_container { 
  grid-area: 1 / 5 / 2 / 6;
}

.contact_icons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: end;
  margin-top: -90px;
}

.icon_phone_header {
  width: 40px;
  height: 40px;
}

.icon_mail_header {
  width: 40px;
  height: 40px;
}

.icon_vk_header {
  width: 40px;
  height: 40px;
}

<div class="rectangle">
<!--Шапка с логотипом, меню и контактами-->
    <div class="header_line_construction">
    <!--Кнопка меню--> 
      <div class="icon_menu">
        <a class="icon_menu_header" href="#"><img class="icon_menu" src="https://img.icons8.com/ios/50/menu--v1.png" alt="кнопка меню"></a>
          </div>
          </div>
    <!--Контейнер с контактами в шапке для сетки--> 
      <div class="contact_container">
    <!--Контейнер с контактами в шапке для позиционирования-->
        <div class="contact_icons">
     <!--Кнопка телефона--> 
        <div class="phone">
          <a class="icon_phone_header" href="#"><img class="icon_phone_header" src="https://img.icons8.com/ios/50/phone--v1.png" alt="кнопка телефона"></a>
        </div>  
     <!--Кнопка электронной почты-->  
      <div class="mail">
        <a class="icon_mail_header" href="#"><img class="icon_mail_header" src="https://img.icons8.com/ios/50/mail.png" alt="кнопка почты"></a>
        </div> 
      <!--Кнопка социальной сети ВК--> 
      <div class="vk">
        <a class="icon_vk_header" href="#"><img class="icon_vk_header" src="https://img.icons8.com/ios/50/vk-com.png" alt="кнопка соц.сети ВК"></a>
        </div> 
        </div>   
      </div>
      </div>
    </div>

Answer 1

Контент в шапке нужно обернуть в div и задать ему максимальную ширину в 1200px(например), и в этом div уже раскидать по сторонам иконки с помощью display: flex; Пример:

.header {
    width: 100%;
    background: linear-gradient(41deg, rgba(31,128,219,1) 0%, rgba(20,66,125,1) 96%);
}
.header .container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}
.contact_icons {
    display: flex;
    grid-gap: 20px;
}

<header class="header">
    <div class="container">
        <a class="icon_menu_header" href="#">
            <img class="icon_menu" src="https://img.icons8.com/ios/50/menu--v1.png" alt="кнопка меню">
        </a>
        <div class="contact_icons">
            <a class="icon_phone_header" href="#">
                <img class="icon_phone_header" src="https://img.icons8.com/ios/50/phone--v1.png" alt="кнопка телефона">
            </a>

            <a class="icon_mail_header" href="#">
                <img class="icon_mail_header" src="https://img.icons8.com/ios/50/mail.png" alt="кнопка почты">
            </a>

            <a class="icon_vk_header" href="#">
                <img class="icon_vk_header" src="https://img.icons8.com/ios/50/vk-com.png" alt="кнопка соц.сети ВК">
            </a>
        </div>
    </div>
</header>

БЛОГ НА HUSL

Что нужно сделать, чтобы иконки в хэдере при уменьшении экрана не сдвигались в след за хэдером?

Ответы (1 шт):