Как сделать так, чтобы верхняя расширяемая панель навигации была шире, чем тело?

Question

Я пытался создать навигационную панель «всегда сверху», складывающуюся на маленьких экранах, используя html и bootstrap 4.4.1, но как бы я ни старался, навигационная панель всегда превышает ширину тела.

Это мой код прямо сейчас:

  <section id="section1-navbar">
    <div class="row" id="div-navbar-superior">
      <div class="container col-lg-12">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand logo-text" href="#top-bar">Correspondencia</a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav ml-auto">
              <li class="top-nav-item">
                <button type="button" class="btn btn-light"><a class="nav-link" href="#"><i class="fas fa-user"></i> Perfil</a></button>
              </li>
              <li class="top-nav-item">
                <button type="button" class="btn btn-light"><a class="nav-link" href="#"><i class="far fa-comments"></i> Mensajes</a></button>
              </li>
              <li class="top-nav-item">
                <button type="button" class="btn btn-light"><a class="nav-link" href="#"><i class="fas fa-home"></i> Inicio</a></button>
              </li>
              <li class="top-nav-item">
                <button type="button" class="btn btn-light"><a class="nav-link" href="#"><i class="fas fa-sign-out-alt"></i> Salir</a></button>
              </li>
            </ul>

          </div>
        </nav>
      </div>

    </div>
  </section>

Answer 1

Это происходит из-за полей строки, поэтому просто возьмите строку div в

<div class="container-fluid"></div>

https://jsfiddle.net/rqw9ov3y/

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>


<section id="section1-navbar">
  <div class="container-fluid">
    <div class="row" id="div-navbar-superior">
      <div class="container col-lg-12">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand logo-text" href="#top-bar">Correspondencia</a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav ml-auto">
              <li class="top-nav-item">
                <button type="button" class="btn btn-light"><a class="nav-link" href="#"><i class="fas fa-user"></i> Perfil</a></button>
              </li>
              <li class="top-nav-item">
                <button type="button" class="btn btn-light"><a class="nav-link" href="#"><i class="far fa-comments"></i> Mensajes</a></button>
              </li>
              <li class="top-nav-item">
                <button type="button" class="btn btn-light"><a class="nav-link" href="#"><i class="fas fa-home"></i> Inicio</a></button>
              </li>
              <li class="top-nav-item">
                <button type="button" class="btn btn-light"><a class="nav-link" href="#"><i class="fas fa-sign-out-alt"></i> Salir</a></button>
              </li>
            </ul>

          </div>
        </nav>
      </div>

    </div>
   </div>
  </section>