After до конца окна браузера без прокрутки?

Question

[Ваня]

Имеется длинное прямоугольное меню:

margin: 0px auto;
max-width:1200px;

В нем класс header:

.header_menu {
    position: relative;
}

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

.header_menu::before {
    content: "";
    display: block;
    height: 100%;
    left: -300%;
    position: absolute;
    top: 0;
    width: 300%;
    background: #e0a40e;
    z-index: 1;
}

Работает, как не знаю) А с after как на сайте не хочет, появляется скрол на 1 километр:

.header_menu::after {
    content: "";
    display: block;
    height: 100%;
    right: -100%;
    position: absolute;
    top: 0;
    width: 100%;
    background: #000;
    z-index: 1;
}

Помогите сделать это

add: между ними то в header_menu есть дивы, это наверное из-за них так поехало все, Не знаю что делать

codepen.io/anon/pen/LRVJkm

Comments

[Егор]

напишите пример в codepen.io, быстрее помогут

[Ваня]

Егор: добавил

Answer 1

[Егор]

Если нужны просто цветные полосы можно просто background подставить.
codepen.io/egorava/pen/zKGJLW

Comments

[Ваня]

Извините, не уточнил, они должны быть разного цвета

[Ваня]

Знаете у меня появилась идея на основе вашего предложения, сделать полосу, справа нужный цвет полосы, а before который работает сверху

[Егор]

Сергей: Попробуйте тогда overflow: hidden применить
codepen.io/egorava/pen/zKGJLW

[Ваня]

Да, действительно, работает, спасибо