Keep left margin of a div inline with another div when resizing-CodePudding

the problem that I'm having is that when I resize the browser the left margins of both the and my card divs aren't aligning. Is there some sort of css property or maybe some JS that will make them stay aligned when resizing?

here's my sandbox

CodePudding user response：

Add the .filter margin margin: 0 80px; to your .row. and then remove justify-content: center;. It will loose the centered. But will be align on the left. To aviod the overflow from the body, you can set width: calc(100% - 160px);to your .row:

/* ADDED BELOW */
  margin: 0 80px;
  justify-content: unset;
  width: calc(100% - 160px);

After if you want to keep your card more center, either you use justify-content: space-between; on row, either you use margin: 10px auto; on your card.

DEMO:

body {
  margin: 0 auto;

  max-width: 1200px;
}
.row {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  /*ADDED BELOW */
  margin: 0 80px;
  justify-content: unset;
  width: calc(100% - 160px);
}

.filter {
  display: flex;

  margin: 0 80px;
}

.filter select {
  display: inline;
  width: 15rem;
  margin: 10px;
  border-radius: 5px;
}

.card {
  width: 15rem;
  margin: 10px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.info {
  padding: 15px;
}

.img-container {
  padding-top: 0;
  position: relative;
}

.card img {
  width: 100%;
  object-fit: cover;
}

.price {
  font-weight: bold;
}

<div id="root">
   <div class="App">
      <div class="filter-container">
         <div class="product-listing-wrap">
            <div class="filter">
               <select class="custom-select" id="priceGroup">
                  <option value="1">Under $50</option>
                  <option value="2">$50 to $100</option>
                  <option value="3">$100 to $250</option>
                  <option value="4">Over $250</option>
               </select>
            </div>
            <div class="row" style="
               margin: 0 80px;
               padding: 10px 0;
               width: calc(100% - 160px);
               ">
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="1"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="2"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="3"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="4"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="5"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="6"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="7"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="8"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

CodePudding user response：

try it:

.row {
    display: flex;
    justify-content: space-between;
    margin: 0 80px;
    max-width: 1040px;
    flex-flow: wrap;
}