title: Container doesn't take the whole horizontal space
body: <p>I've a basic layout composed by a single column that contains two sections: the first one is only text and the second one is a table.</p>
  <p>Here the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    background-color: lightred;
  }
  
  .first-section {
    border: 2px solid steelblue;
    width: 100%;
  }
  
  .second-section {
    border: 2px solid tomato;
    width: 100%;
  }
  
  /* TABLE */
  table {
  }
  
  thead {
    background-color: black;
    color: white;
  }
  
  tbody, tr, td {
    border: 1px solid black;
  }
  
  .cell-first-column {
    width: 200px;
    height: 70px;  
  }
  
  .cell, th {
    width: 100px;
    height: 70px;
  }
  
  .td-cell {
    height: 70px;
    border: 1px solid black;
  }
  
  .chart {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0
  }
  
  .chart-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: gold;
  }
  
  .cell-text {
    z-index: 10;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="first-section"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit mi, tristique nec pharetra hendrerit, egestas id elit. Proin suscipit sapien urna, id tempus ipsum consectetur ut. Praesent at consequat nisl, at pretium risus. Mauris varius hendrerit semper. Maecenas erat erat, congue id semper dictum, dignissim sed dui. Suspendisse pellentesque lorem quis tellus elementum, non fermentum diam consequat. In aliquet justo et faucibus malesuada. Nunc vestibulum nibh non justo tristique, sit amet sollicitudin neque volutpat. Curabitur elementum, neque vitae blandit luctus, augue nisi sollicitudin lectus, sed fringilla turpis sapien quis ex. Aliquam mattis vel est consequat pretium. Etiam eleifend in mauris ut pharetra. Integer eget leo dolor. Aliquam tellus ligula, hendrerit eu sem eget, scelerisque eleifend quam. Suspendisse potenti.
  Curabitur pellentesque lacus nulla, eu pharetra orci cursus non. In commodo justo nec facilisis ultricies. Maecenas vel tincidunt neque, pretium auctor tellus. Morbi ornare diam malesuada imperdiet tempor. Suspendisse faucibus diam dictum, consectetur turpis sed, ullamcorper ante. Vivamus imperdiet tincidunt nulla vel blandit. Proin dictum tortor sapien, id ullamcorper nisl fermentum sed. Pellentesque vestibulum placerat nisl quis sodales. Nunc ultricies mauris porta sollicitudin vulputate. Sed non quam velit. Morbi est diam, lobortis at eleifend sed, porttitor quis ipsum. Quisque eu auctor libero.
    &lt;/div&gt;
    
    &lt;div class="second-section"&gt;
      &lt;table cellpadding="0"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Company&lt;/th&gt;
            &lt;th&gt;Contact&lt;/th&gt;
            &lt;th&gt;Country&lt;/th&gt;
            &lt;th&gt;Number&lt;/th&gt;
            &lt;th&gt;Color&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
  
        &lt;tr&gt;
          &lt;td&gt;&lt;div class="cell-first-column"&gt;Alfreds Futterkiste&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div class="cell"&gt;Maria Anders&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div class="cell"&gt;Germany&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div class="cell"&gt;1234567&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div class="cell"&gt;red&lt;/div&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;div class="cell-first-column"&gt;Centro comercial&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div class="cell"&gt;Francisco Chang&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div class="cell"&gt;Mexico&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div class="cell"&gt;1234567&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div class="cell"&gt;blue&lt;/div&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;td&gt;&lt;div class="cell-first-column"&gt;Opla&lt;/div&gt;&lt;/td&gt;
          &lt;td class="td-cell"&gt;
            &lt;div class="chart"&gt;
              &lt;div class="chart-inner" style="height: 90%"&gt;&lt;/div&gt;
              &lt;div class="cell-text"&gt;Charles Boule&lt;/div&gt;
            &lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="td-cell"&gt;
            &lt;div class="chart"&gt;
              &lt;div class="chart-inner" style="height: 30%"&gt;&lt;/div&gt;
              &lt;div class="cell-text"&gt;France&lt;/div&gt;
            &lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="td-cell"&gt;
            &lt;div class="chart"&gt;
              &lt;div class="chart-inner" style="height: 50%"&gt;&lt;/div&gt;
              &lt;div class="cell-text"&gt;1234567&lt;/div&gt;
            &lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="td-cell"&gt;
            &lt;div class="chart"&gt;
              &lt;div class="chart-inner" style="height: 70%"&gt;&lt;/div&gt;
              &lt;div class="cell-text"&gt;yellow&lt;/div&gt;
            &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The first section (the text) should always occupy all the available space and this does not happen when the table is larger than the width of the window and therefore the horizontal scroll appears.</p>
  <p>This is ok:</p>
  <p><a href="https://i.stack.imgur.com/ln6ep.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ln6ep.png" alt="enter image description here" /></a></p>
  <p>This is not ok because there is some white space at the right if the text, the container should instead be as wide as the available space:</p>
  <p><a href="https://i.stack.imgur.com/n3fix.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n3fix.png" alt="enter image description here" /></a></p>
  <p>How can I fix it?</p>