Расположение блока на всю ширину экрана

Question

Есть header с меню nav, при наведении на пункты выпадает блок с подпунктами, выпадает с помощью hover.

Нужно этот выпадающий блок растянуть на всю ширину, если ставить width 100%, то этот блок уходит за границу страницы. Только с помощью отрицательного значения left можно позиционировать, но может есть варианты реализовать это иначе? Стремлюсь к такому результату:

<header class="header">
        <div class="logo">
        </div>

        
        <nav class="menu">
          <ul class="menu__list">
            <li>
              <a href="" class="menu__link">Пункт 1</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 2</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 3</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 4</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 5</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
          </ul>
        </nav>  
        <!-- HAMBURGER MENU BEGIN -->
          <div class="burger-menu">
            <a href="#" class="burger-menu__button">
              <span class="burger-menu__lines"></span>
            </a>
            <nav class="burger-menu__nav"> <!--menu-->
              <ul>
                <input type="radio" name="menu" id="one" checked>
                <li>
                  <label for="one" class="title"><i class="fa fa-folder"></i>Пункт 1</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="two">
                <li>
                  <label for="two" class="title"><i class="fa fa-edit"></i>Пункт 2</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="three">
                <li>
                  <label for="three" class="title"><i class="fa fa-gavel"></i>Пункт 3</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="four">
                <li>
                  <label for="four" class="title"><i class="fa fa-gears"></i>Пункт 4</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="five">
                <li>
                  <label for="five" class="title"><i class="fa fa-gears"></i>Пункт 5</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
              </ul>
            </nav>
              
              
              <!-- <a href="" class="burger-menu__link">asdasd</a>
              <a href="" class="burger-menu__link">asdasd</a>
              <a href="" class="burger-menu__link">asda</a>
              <a href="" class="burger-menu__link">a</a>
              <a href="" class="burger-menu__link">aa</a> -->
            </nav>

            <div class="burger-menu__overlay">

            </div>
          </div>
        <!-- HAMBURGER MENU END -->

      </header>

CSS CODE

.header {
    padding: 0 100px 0 100px;
    font-weight: 500;
    width: 100%;
    min-height: 198px;
    max-height: 288px;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #0B0A0D;
    font-size: 16px;
    font-family: 'M PLUS 1p', sans-serif;
  }
  .list__links {
    display: flex;
    width: 362px;
    height: 159px;
    
    flex-wrap: wrap;
    flex-direction: column;
  }
  .logo {
    background: url(./img/logo.png);
    width: 42px;
    height: 50px;
    margin-right: 213px;
  }
  
  .menu a {
    text-decoration: none;
  }
  
  .menu li {
    list-style: none;
    position: relative;
    margin-bottom: 30px;
    margin-right: 142px;
  }
  
  .menu__list {
    display: flex;
  }
  
  .menu__list>li {
    margin: 0 5px;
  }
  
  .menu__list>li:hover {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
  }
  
  .menu__link {
    font-size: 1.6vw;
    color: #fff;
  }
  
  .menu__link:hover + .sub-menu__list,
  .sub-menu__list:hover {
    padding-top: 23px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #0B0A0D;
    z-index: 999;
    margin-top: 3px;
  }
  
  .sub-menu__list {
    
    height: 288px;
    display: none;
    
    position: absolute;
    left: 0;
    top: 16px;
    padding: 20px 0px 0px 0px;
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, .4);
    width: calc(100vw - 550px); 
    justify-content: space-between;
  }
  

  
  .sub-menu__link {
    color: white;
    transition: .4s;
    &:hover {
        color:#75FF72;
        transition: .4s;
        ;
    }
  }


// adaptive

@media screen and (max-width: 980px) {
    .menu {
        display: none;
    }

}

Answer 1

Вам нужно правильно спозиционировать подменю

Посмотрите это решение
Обратите внимание на каких блоках висит position: absolut и position:relative

А так же left и right и top свойства

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    background: gray;
    font-size: 22px;
    position: relative;
}

.sub-menu {
      position: absolute;
    left: 0;
    right: 0;
    min-height: 300px;
    display: none;
    opacity: 0;
    pointer-events: none;
    background: gold;
}

.sub-item {
    width: 75px;
    height: 35px;
    background: red;
    margin: 10px;
}

.menu-item {
    margin: 10px;
}

.menu-item span {
    display: block;
    padding: 10px 25px;
    background: white;
    cursor: pointer;
}

.menu-item:hover .sub-menu {
    display: flex;
    pointer-events: auto;
    opacity: 1;
    top: 100%;
}

.sub-menu--2 {
    background: limegreen;
}

.sub-menu--3 {
    background: aquamarine;
}

<header>
    <nav class="navigation">
            <div class="menu-item">
                <span>Меню 1</span>
                <div class="sub-menu sub-menu--1">
                    <div class="sub-item">1</div>
                    <div class="sub-item">2</div>
                    <div class="sub-item">3</div>
                </div>
            </div>
            <div class="menu-item">
                <span>Меню 2</span>
                <div class="sub-menu sub-menu--2">
                    <div class="sub-item">4</div>
                    <div class="sub-item">5</div>
                    <div class="sub-item">6</div>
                </div>
            </div>
            <div class="menu-item">
                <span>Меню 3</span>
                <div class="sub-menu sub-menu--3">
                    <div class="sub-item">7</div>
                    <div class="sub-item">8</div>
                    <div class="sub-item">9</div>
                </div>
            </div>
    </nav>
</header>

Answer 2

Попробуйте так
Это изменённый в некоторых местах ваш код CSS
Обратите внимание на header и те блоки, вверху которых комментарием помечено this

 /*this*/
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

.header {
    padding: 0 100px 0 100px;
    font-weight: 500;
    width: 100%;
    min-height: 198px;
    max-height: 288px;
    position: relative;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #0B0A0D;
    font-size: 16px;
    font-family: 'M PLUS 1p', sans-serif;
}

.list__links {
    display: flex;
    width: 362px;
    height: 159px;

    flex-wrap: wrap;
    flex-direction: column;
}

.logo {
    background: url(./img/logo.png);
    width: 42px;
    height: 50px;
    margin-right: 213px;
}

.menu a {
    text-decoration: none;
}

/*this*/
.menu li {
    list-style: none;
    margin-bottom: 30px;
    margin-right: 142px;
}

.menu__list {
    display: flex;
}

.menu__list>li {
    margin: 0 5px;
}

.menu__list>li:hover {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
}

.menu__link {
    font-size: 1.6vw;
    color: #fff;
}

/*this*/
.menu__link:hover + .sub-menu__list,
.sub-menu__list:hover {
    padding-top: 23px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #0B0A0D;
    z-index: 999;
    position: absolute;
    top: 100%;
}

/*this*/
.sub-menu__list {
    position: absolute;
    height: 288px;
    display: none;
    left: 0;
    right: 0;
    bottom:  -100%;
    padding: 20px 0px 0px 0px;
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, .4);
    justify-content: space-between;
    opacity: .5;
    background-color: red;
}



.sub-menu__link {
    color: white;
    transition: .4s;
}

.sub-menu__link:hover {
    color: #75FF72;
    transition: .4s;
}


// adaptive

@media screen and (max-width: 980px) {
    .menu {
        display: none;
    }

}

БЛОГ НА HUSL

Расположение блока на всю ширину экрана

Ответы (2 шт):