title: How make Bootstrap 4 card decks same width each row?
body: <p>I am displaying 4 cards each row using a card deck:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="card-deck"&gt;
      &lt;!-- 4 of these --&gt;
      &lt;div class="card"&gt;
        &lt;img class="card-img-top img-adjusted" &gt;
         &lt;div class="card-body"&gt;...&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="card-deck"&gt;
      &lt;!-- 4 of these --&gt;
      &lt;div class="card"&gt;
        &lt;img class="card-img-top img-adjusted" &gt;
         &lt;div class="card-body"&gt;...&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p>The cards within each deck are the same width, but the <strong>decks</strong> are not, i.e. the deck of the 2nd row is wider than the deck of the 1st row. How do I get the decks to be of the same width? </p>
  
  <p>I have tried setting <code>.card-decks{width: 100%;}</code>, which works for full rows, but distorts cards of rows that have just 1-2 cards.</p>
  
  <p>Additional CSS:
  My images are of different sizes, that's why I added the following CSS to make them the same. No other CSS should affect the cards:</p>
  
  <pre><code>.img-adjusted{
  position: relative;
  float: left;
  background-position: 50% 50%;
  background-repeat:   no-repeat;
  background-size:     cover;
  }
  </code></pre>
  
  <p>Also, I want to keep the style responsive, so would like to avoid hardcoding pixel set pixel widths.</p>