Статическая начальная загрузка не работает на 100% ширины на маленьких экранах

Question

ребята, у меня проблема в моем navbar. На меньших экранах панель навигации не охватывает всю ширину. вот мой код:

nav.navbar {
  background-color: black;
  /* top: 0;
        margin: 0; */
  padding-left: 0;
  padding-right: 0;
  width: auto;
  box-sizing: border-box;
  border-bottom: 5px solid #333333;
}

div.navbar-collapse {
  background-color: black;
  width: 100%;
  white-space: nowrap;
}

<nav class="navbar navbar-expand-xl static-top">
  <button class="navbar-toggler hamburguer" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <div class="menu-icon">
                <div class="bar"></div>
                <div class="bar mid"></div>
                <div class="bar"></div>
            </div>
            </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav options links">
      <a class="nav-item nav-link" href="https://www.sfdergedg.com/about.php">About</a>
      <a class="nav-item nav-link" href="https://www.sfdergedg.com/blog.php">Blog</a>
      <a class="nav-item nav-link" href="https://www.sfdergedg.com/media.php">Media</a>
      <a class="nav-item nav-link" href="https://www.sfdergedg.com/meet_the_dev.php">Meet the Dev!</a>
      <a class="nav-item nav-link" href="https://www.sfdergedg.com/support.php">Support</a>
      <a class="nav-item nav-link" href="https://www.sfdergedg.com/contacts.php">Contacts</a>
    </div>
  </div>
</nav>

Я видел проблемы по этому поводу, но ничего не решило мою проблему. Кажется, эта проблема распространена, когда мы используем статическую навигационную панель.

спасибо заранее! ;)

Answer 1

Проблема в том, что ниже navbar у меня было изображение без установленной ширины. И поскольку он был шире, чем экран, навигационная панель не охватила 100%. Это исправлено после того, как я установил ширину этого изображения на 100% или меньше. Спасибо за все ответы! ;)

С наилучшими пожеланиями, Эдуардо

Answer 2

Вам нужно установить margin и padding на 0px для body тега.

Ниже работает демоверсия:

body {
  margin: 0;
  padding: 0;
}

nav.navbar {
  background-color: black;
  width: auto;
  box-sizing: border-box;
  border-bottom: 5px solid #333333;
}


div.navbar-collapse {
  background-color: black;
  width: 100%;
  white-space: nowrap;
}

<nav class="navbar navbar-expand-xl static-top">
  <button class="navbar-toggler hamburguer" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <div class="menu-icon">
                <div class="bar"></div>
                <div class="bar mid"></div>
                <div class="bar"></div>
            </div>
            </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav options links">
      <a class="nav-item nav-link" href="https://www.sfdergedg.com/about.php">About</a>
      <a class="nav-item nav-link" href="https://www.sfdergedg.com/blog.php">Blog</a>
      <a class="nav-item nav-link" href="https://www.sfdergedg.com/media.php">Media</a>
      <a class="nav-item nav-link" href="https://www.sfdergedg.com/meet_the_dev.php">Meet the Dev!</a>
      <a class="nav-item nav-link" href="https://www.sfdergedg.com/support.php">Support</a>
      <a class="nav-item nav-link" href="https://www.sfdergedg.com/contacts.php">Contacts</a>
    </div>
  </div>
</nav>