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

Question

[Иван]

как сделать 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>

вся проблема в контейнере, но он нужен мне.

Comments

[Андрей]

как вариант добавить горизонтальную линию

Answer 1

[Владимир Проскурин]

Уберите 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

Answer 2

[wqertAnna]

Владимир Проскурин уже ответил вам, как следует адекватно сделать, но если Вы захотите немного псевдоэлементов и оставить структуру кода html, как есть, то переходите по ссылке)

https://codepen.io/anon/pen/dBKeaz