title: Bootstrap: How to stabilize the container padding while changing the window size?
body: <p>When one change the size of the browser's window, I noticed that the padding between the window border and the row (in red) is changing as you can see here:</p>
  
  <p><a href="https://i.stack.imgur.com/iaXfy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iaXfy.png" alt="enter image description here"></a></p>
  
  <p><strong>Then, reducing the window:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/NvELe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NvELe.png" alt="enter image description here"></a></p>
  
  <p>The code I used to make this simple example is:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  &lt;div class="container"&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
    &lt;div class="row" style="background-color: red;margin: 20px;"&gt;
    &lt;br&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>So, I tried to change the class "container", like this:</p>
  
  <pre><code>&lt;style&gt;
  
  .container {
  
    padding-right: auto;
  
    padding-left: auto;
  
    margin-right: 15px;
  
    margin-left: 15px;
  
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>This time, the padding on the left will no move when I change the browser's window, BUT the padding on the right is different and will change:</p>
  
  <p><a href="https://i.stack.imgur.com/zIjML.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zIjML.png" alt="enter image description here"></a></p>
  
  <p><strong>Then reducing the window:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/6gkxu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6gkxu.png" alt="enter image description here"></a></p>
  
  <p>Sorry for all those pictures, but an image is better than an explaination.</p>
  
  <p>Thank you</p>