2

Всем привет. Никак не могу понять как сделать верхнее меню шапки шириной равной желтой ширине сайта, но чтобы серый фон меню так и оставался во всю ширину экрана. Подскажите пожалуйста, всю голову уже сломал

header {
    display: flex;
    align-items: center;justify-content: space-around;
    height: 60px;
    background: #eee;
}
.main {    height: 100vh;
    width: 70%;
    background: #f7c244;
    margin: 0 auto;}
<header>
  <a href="/">LOGO</a>

  <a href="#">Ссылка</a>
 <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
    <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>

  <a href="#">Войти</a>
  <a href="#">Регистрация</a>
</header>

<div class="main"></div>

1
  • Так просто задайте максимальную ширину для шапки max-width: 70%;
    – GGO
    6 фев 2022 в 17:11

2 ответа 2

1

Нужна дополнительная обертка в header

header {   
    background: #eee;
}
.menu {
    width: 70%;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.main {    
    height: 100vh;
    width: 70%;
    background: #f7c244;
    margin: 0 auto;
}
<header>
    <ul class="menu">
        <li><a href="/">LOGO</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>
</header>

<div class="main"></div>

1

Так можно просто создать контейнер, в который впихнуть и шапку и контент часть.

.container {
  width: 1400px;
  margin: 0 auto;
  max-width: 100%;
}

header {
  background: #eee;
}

.menu {
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.main {
  height: 100vh;
  background: #f7c244;
  margin: 0 auto;
}
  <header>

<div class="container">
    <ul class="menu">
      <li><a href="/">LOGO</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>
 </div>
  </header>
   
<div class="container">
  <div class="main"></div>
</div>

1
  • изменил код, серый фон шапки теперь на фул, а навигация в контейнере вместе с блоком контента)
    – Belka
    7 фев 2022 в 12:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.