How to "stretch" the menu to the full width of the screen?

Question

css

Good day to all. I need to stretch the menu to the full width of the screen, how can I do this? A friend said that the layout is crooked, and the wrapper needs to be swapped with the content. But I would like to know in more detail. Since I was picking, but nothing happened.
The site
itself Thank you in advance for your reply.

Answer 1

Alternatively, you can add this to your css file

#navigation {
    width: calc(100% - (-99px));
    margin-left: -50px;
}

and in layout.css on line 75 change this

@media only screen and (min-width: 768px){
ul.nav li {
    padding-left: 3%;
}
}

on this

@media only screen and (min-width: 768px){
ul.nav li {
    padding-left: 50px;
}
}

Although this is not entirely valid. Better deal with the wrapper. On the other hand, it looks normal and nothing goes.
Added a screenshot.

Answer 2

You have it to be in the container or wrapper, depending on how you called it. You need to display the menu from there and give the width 100% throw off the site code, I'll tell you for sure then

Answer 3

<nav class="main-nav">
<a href="#">Главная</a>
<a href="#">Доставка и оплата</a>
<a href="#">О компании</a>
<a href="#">Отзывы</a>
<a href="#">Контакты</a>
</nav>

.main-nav
  display: table
  position: relative
  width: 100%
  height: 60px
  a
    color: #000
    display: table-cell
    text-align: center
    vertical-align: middle
    min-width: 120px
    text-decoration: none
    border-left: 1px solid lighten($accent, 5%)
    transition: background-color 1s easy
    &:last-child
      border-right: 1px solid lighten($accent, 5%)
    &:hover
      background-color: lighten($accent, 5%)
      text-decoration: none
      transition: background 1s easy

the menu will be the entire width of the container, you need to make it width: 100%. elements are distributed evenly and without gaps