After to end of browser window without scrolling?

Question

css

There is a long rectangular menu:

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

It has a header class:

.header_menu {
    position: relative;
}

On the sides, you need to place stripes of the same height as the menu, the height depends on the font size, it may vary in browsers.
Found an example on the site before , copied:

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

It works like I don’t know) And with after , as it doesn’t want on the site, it scrolls for 1 kilometer:

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

Help me to do this
add: between them there are divs in the header_menu, it's probably because of them that everything went so wrong, I don't know what to do
codepen.io/anon/pen/LRVJkm

Answer 1

If you just need colored stripes, you can simply substitute the background.
codepen.io/egorava/pen/zKGJLW