BenderIsGreat34
@BenderIsGreat34
junior front-end

Как сделать border-bottom?

как сделать border-bottom у header на ширину всей страницы?
вот мой код:
<div class="container">
      <header class="header-menu">
        <div class="header-menu__logo"><img src="img/logo.png" alt="Логотип"></div>
        <div class="header-menu__nav-bar">
          <nav class="header-menu__nav">
            <a class="header-menu__links" href="#">ABOUT</a>
            <a class="header-menu__links" href="#">CONTACT</a>
            <a class="header-menu__links" href="#">CATALOG</a>
            <a class="header-menu__links" href="#">BLOG</a>
            <button type="button" class="header-menu__btn" name="button">Sign in</button>
          </nav>
        </div>
      </header>

вся проблема в контейнере, но он нужен мне.
5d1d04b113cf4624918253.png
  • Вопрос задан
  • 90 просмотров
Решения вопроса 2
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Уберите header из контейнера, а в контейнер поместите содержимое header'а
<header class="header-menu">
      <div class="container">
        <div class="header-menu__logo"><img src="img/logo.png" alt="Логотип"></div>
        <div class="header-menu__nav-bar">
          <nav class="header-menu__nav">
            <a class="header-menu__links" href="#">ABOUT</a>
            <a class="header-menu__links" href="#">CONTACT</a>
            <a class="header-menu__links" href="#">CATALOG</a>
            <a class="header-menu__links" href="#">BLOG</a>
            <button type="button" class="header-menu__btn" name="button">Sign in</button>
          </nav>
        </header>
     </div>

теперь у вас header на всю ширину, можете задавать ему border
Ответ написан
Комментировать
wqertAnna
@wqertAnna
Владимир Проскурин уже ответил вам, как следует адекватно сделать, но если Вы захотите немного псевдоэлементов и оставить структуру кода html, как есть, то переходите по ссылке)

https://codepen.io/anon/pen/dBKeaz
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы