title: Bootstrap. On the left side of screen is white stripe
body: <p><a href="https://i.stack.imgur.com/6m7Gj.png" rel="nofollow noreferrer">enter image description here</a>
  Why on the right side of screen is white stripe?
  The problem only on smartphones.
  I used bootstrap:</p>
  
  <p>index.html::</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Main&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;script src="jquery-3.2.0.min.js" &gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="header-wrap"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div id="nav-left"&gt;
                  &lt;ul class="nav navbar-nav navbar-left"&gt;
                      &lt;li&gt;+7(495)123-45-67&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div id="nav"&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Главная&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="works.html"&gt;Работы&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Обо Мне&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="row centered"&gt;
                  &lt;div class="col-lg-8 col-lg-offset-2"&gt;
                      &lt;center&gt;
                          &lt;h1 id="head"&gt;Дизайн&lt;/h1&gt;
                          &lt;h1&gt;И&lt;/h1&gt;
                          &lt;h1&gt;Архетектурная визуализация&lt;/h1&gt;
                          &lt;p&gt;E-Mail:example@mail.ru&lt;/p&gt;
                      &lt;/center&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="preferences"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;h1&gt;Преимущества работы с нами:&lt;/h1&gt;
              &lt;hr/&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-4"&gt;
                      &lt;center&gt;
                          &lt;img src="images/29.png" alt=""&gt;&lt;br&gt;
                          &lt;p&gt;Высокая скорость выполнения заказа&lt;/p&gt;
                      &lt;/center&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-4"&gt;
                      &lt;center&gt;
                          &lt;img src="images/8.png" alt=""&gt;&lt;br&gt;
                          &lt;p&gt;Низкая цена за квкадратный метр&lt;/p&gt;
                      &lt;/center&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-4"&gt;
                      &lt;center&gt;
                          &lt;img id="mike" src="images/12.png" alt=""&gt;&lt;br&gt;
                          &lt;p&gt;Связь 24/7&lt;/p&gt;
                      &lt;/center&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="works"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;h1&gt;Работы:&lt;/h1&gt;
              &lt;hr&gt;&lt;br&gt;
              &lt;div class="row centered"&gt;
                  &lt;center&gt;
                      &lt;img class="img-thumbnail" src="images/house.jpg" alt="Дом в Италии"&gt;
                      &lt;h1&gt;Дом в Италии&lt;/h1&gt;
                      &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                          standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                          it to make a type specimen book. It has survived not only five centuries&lt;/p&gt;
                      &lt;hr&gt;
                      &lt;img class="img-thumbnail" src="images/cafe.jpg" alt="Кафе и ресторан в здании старого завода в Гааге"&gt;
                      &lt;h1&gt;Кафе и ресторан в здании старого завода в Гааге&lt;/h1&gt;
                      &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                          standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                          it to make a type specimen book. It has survived not only five centuries&lt;/p&gt;
                      &lt;hr&gt;
                      &lt;img class="img-thumbnail" src="images/house_2.jpg" alt="Дом в Италии"&gt;
                      &lt;h1&gt;Домик в Португалии&lt;/h1&gt;
                      &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                          standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                          it to make a type specimen book. It has survived not only five centuries&lt;/p&gt;
                      &lt;hr&gt;
                      &lt;img class="img-thumbnail" src="images/hospital.jpg" alt="Дом в Италии"&gt;
                      &lt;h1&gt;Здание лечебницы в Нидерландах&lt;/h1&gt;
                      &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                          standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                          it to make a type specimen book. It has survived not only five centuries&lt;/p&gt;
                      &lt;hr&gt;
                  &lt;/center&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="consultation"&gt;
          &lt;center&gt;
              &lt;form role="form" class="form-inline"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" placeholder="Ваш E-Mail:"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" placeholder="Номер телефона:"&gt;
                  &lt;/div&gt;
                  &lt;button class="btn btn-primary"&gt;Получить бесплатную консультацию&lt;/button&gt;
              &lt;/form&gt;
          &lt;/center&gt;
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-6 lefted"&gt;
                      &lt;p&gt;All rights reserved &amp;copy 2017&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-6 righted"&gt;
                      &lt;a href="#"&gt;&lt;i class="fa fa-facebook-official"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;a href="#"&gt;&lt;i class="fa fa-vk"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;a href="#"&gt;&lt;i class="fa fa-twitter-square"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>css::</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Poiret+One');
  /* Общие стили */
  
  body{
      font-family: 'Poiret One';
  }
  
  
  i {
  font-family: fontawesome !important;
  }
  
  h1{
      color: #eaeaea;
      font-family: 'Poiret One';
      font-size: 50px;
  }
  
  .centered{
      text-align: center;
  }
  
  .righted{
      text-align: right;
  }
  
  .lefted{
      text-align: left;
  }
  
  /* Стили головной части сайта */
  
  #nav-left{
      font-size: 20px;
      color: #eaeaea; 
  }
  
  #nav-left ul li{
      color: #eaeaea;
      margin-top: 17px;
      margin-left:10px; 
  }
  
  #nav{
      font-size: 15px;
      color: #eaeaea;
  }
  
  #nav ul li a{
      color: #eaeaea;
      margin-top: 10px;
      margin-left:10px; 
      border-radius: 10px;
      font-size: 20px;
  }
  
  #nav ul li a:hover{
      text-decoration: #eaeaea;
      background-color: rgba(158, 158, 163,0.5);
  }
  
  .active a{
      background-color: rgba(158, 158, 163,0.5);
  }
  
  #header-wrap{
      width: 100%;
      background: url("../images/header.jpg") no-repeat center center;
      background-position: center center;
      min-height: 500px;
      background-size: 100%;
      position: relative;
  
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  
  }
  
  #header-wrap #head{
      margin-top: 60px;
      font-weight: 300;
  }
  
  #header-wrap p{
      color: white;
      font-size: 15px;
      margin-top: 90px;
  }
  /* Блок о преимуществах */
  
  #preferences{
      width: 100%;
      min-height: 400px;
      background-color: #0fcbff;
      border-top: 3px solid white; 
  }
  
  #preferences h1{
      text-align: center;
  }
  
  #preferences .container hr{
      width: 60%;
  }
  
  #preferences p{
      font-size: 25px;
      color: white;
      width: 80%;
  }
  
  #preferences #mike{
      width: 200px;
      height: 150px;
  }
  
  /* Блок о работах */
  
  #works{
      width: 100%;
      min-height: 400px;
      background-color: #06cece;
      border-top: 3px solid white; 
  }
  
  #works h1{
      text-align: center;
  }
  
  #works hr{
      width: 40%;
  }
  
  #works img{
      height: 400px;
      margin-top: 50px;
  }
  
  #works p{
      font-size: 15px;
      color: white;
      width: 50%;
  }
  
  #consultation{
      border-top: 3px solid white;
      background: #6f776f;
      height: 100px;
  }
  
  #consultation form .form-group{
      margin-top: 30px;
  }
  
  #consultation button{
      margin-top: 30px;
  }
  
  #footer{
      border-top: 3px solid white;
      min-height: 100px;
      background-color: #1f4863;
  }
  
  #footer i {
      margin-top: 50px;
      font-size: 30px;
      margin-left: 5px; 
      color: #f2f2f2;
  }
  
  #footer p{
      font-size: 15px;
      color: #f2f2f2;
      margin-top: 50px;
  }
  </code></pre>
  
  <p>The problem starts from 320 px of width in developer tools in chrome.
  But actually it starts from 480px(i tried on my smartphone with 480 px of width)
  You can try it there:<a href="http://unphilosophic-diagr.000webhostapp.com" rel="nofollow noreferrer">enter link description here</a> unphilosophic-diagr.000webhostapp.com</p>