Как удалить белое поле с обеих сторон моей HTML-страницы

Question

Я изучаю веб-дизайн и использую flex для создания адаптивных макетов для моего сайта.По какой-то причине мой контейнерный контейнер создает своего рода белое поле с левой и правой стороны, что я не понимаю, как его удалить, так что содержимое занимает 100% ширины.Вот сценарий js, чтобы проиллюстрировать это.

https://jsfiddle.net/vhtbndjp/3/

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="navigation">
    <h1><a href="index.html">Blah Blah</a></h1> <!-- Logo in theory-->
    <a class="nav" id="push" href="#">Contact</a>
    <a class="nav" href="#">Log In</a>
    <a class="nav" href="#">Sign Up</a>
  </div>

  <div class="main">
    <h1>
      Blah blah
    </h1>
  </div>

  <div class="footer">
  </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}

.container {
    min-height: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
}

.main {
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

}

.navigation .main .footer {
    flex-shrink: 0;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14vh;
    background-color: black;
    opacity: 0.9;
    color: white;
}

.navigation {
    display: flex;
    justify-content: flex-end;
    background-color: black;
    opacity: 0.9;
    padding: 0.7em;
    color: white;
}

Answer 1

Вы используете bootstrap, поэтому полагайтесь на классы boostrap (https://getbootstrap.com/docs/4.2/utilities/)

.footer {
  height: 14vh;
  background-color: black;
  opacity: 0.9;
  color: white;
}

.navigation {
  background-color: black;
  opacity: 0.9;
  padding: 0.7em;
  color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="d-flex vh-100 flex-column">
  <div class="navigation d-flex justify-content-end">
    <h1><a href="index.html">Blah Blah</a></h1>
    <!-- Logo in theory-->
    <a class="nav" id="push" href="#">Contact</a>
    <a class="nav" href="#">Log In</a>
    <a class="nav" href="#">Sign Up</a>
  </div>

  <div class="main flex-grow-1 d-flex flex-column align-items-center justify-content-center">
    <h1>
      Blah blah
    </h1>
  </div>

  <div class="footer d-flex align-items-center justify-content-center">
  </div>
</div>

Answer 2

Если вы добавите дополнительный класс no-padding в контейнер, вы можете добавить: -

.no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

Без влияния на другие контейнеры на вашем сайте.

См.полный пример ниже.

html, body {
    height: 100%;
    width: 100%;
}

.container {
    min-height: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
}

.no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.main {
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

}

.navigation .main .footer {
    flex-shrink: 0;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14vh;
    background-color: black;
    opacity: 0.9;
    color: white;
}

.navigation {
    display: flex;
    justify-content: flex-end;
    background-color: black;
    opacity: 0.9;
    padding: 0.7em;
    color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container no-padding">
  <div class="navigation">
    <h1><a href="index.html">Blah Blah</a></h1> <!-- Logo in theory-->
    <a class="nav" id="push" href="#">Contact</a>
    <a class="nav" href="#">Log In</a>
    <a class="nav" href="#">Sign Up</a>
  </div>

  <div class="main">
    <h1>
      Blah blah
    </h1>
  </div>

  <div class="footer">
  </div>
</div>