Как убрать отступы на Bootstrap navbar

Question

Я новичок в начальной загрузке, поэтому заранее прощаю любое вопиющее невежество.Кажется, я не могу избавиться от «отступа» (красного круга) вокруг содержимого внутри .container-fluid.Я вижу, что .container-fluid действительно использует всю ширину экрана (серый фон), но все внутри него имеет отступы, от которых я не могу избавиться, кроме тега <p> в строке 2, столбец 1(синий квадрат).Я тоже не понимаю, почему это происходит.Как избавиться от нежелательных отступов и почему это не происходит с тегом <p>?

Примечание: это отражается справа (нежелательные отступы).

.container-fluid {
    padding: 0 0 0 0;
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-left: 0;
    margin-right: 0;
}
.col {
    margin-left: 0;
    margin-right: 0;
}

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

<div class="container-fluid" style="background-color: gray;">
    <div class="row">
        <div class="col">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <a href="index.php" class="navbar-brand">%company name%</a>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="index.php">Home</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-1">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
            </ul>
            <p>left nav-bar</p>
        </div>
        <div class="col-xs-11">
            <p>main content</p>
        </div>
    </div>
</div>

Answer 1

Всегда ставьте !important в свой код CSS.

Это означает, что он переопределит любой предопределенный стиль CSS - который в данном случае исходит из файла bootstrap.css.

.container-fluid {
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.row, .col {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

Answer 2

Ответ прост: вам не нужно переносить панель навигации в контейнер.

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

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a href="index.php" class="navbar-brand">%company name%</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="index.php">Home</a>
        </li>
      </ul>
    </div>
  </nav>
<div class="container-fluid" style="background-color: gray;">
  <div class="row">
    <div class="col-xs-1">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
      </ul>
      <p>left nav-bar</p>
    </div>
    <div class="col-xs-11">
      <p>main content</p>
    </div>
  </div>
</div>

Answer 3

Bootstrap имеет огромное количество предопределенных стилей, просто добавьте! Важно в конце вашего стиля заполнения

Padding: 0 !important;
Margin: 0!important;

Ответ предоставляется на моем мобильном телефоне, когда на рабочем столе я могу переписать ваш скрипт