Img not taking up full width of grid container even though set to 1fr-CodePudding

Im trying to create a book store page and I want the two cards to take up half the page respectively (with 20px gap). I already set the parent, .book-cards, to 1fr 1fr and card-top, to width: 100% so that it will take up 100% of the grid area which is half of the page.

If you run the code, the cards are clearly not taking up half of the page.

.book-section-title {
    text-align: center;
    font-family: 'Recoleta', sans-serif;
    font-size: 35px;
}

.card-img {
    width: 90%;
    height: 90%;
    border-radius: 5px;
}

.card-top {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e3dcee;
    border-radius: 7px;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width:fit-content;
    height: 100%;
}

.book-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    gap: 20px
}

.book-title {
    text-align: center;
    width: 165px;
    color: #5a5a5a;
    font-family: 'Widy-Thin';
    font-size: 14px;
    color: black;
}

<div >
        <div class='card'>    
            <div >
                <img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" >
            </div> 
            <div >
                    <p >Think Life Like A Monk</p>
            </div>
        </div>    
        <div class='card'>    
            <div  style="background-color: #f0edf5">
                <img src="https://bci.kinokuniya.com/jsp/images/book-img/97805/97805525/9780552565974.JPG" alt="card-1" >
            </div> 
            <div >
                
                <p >Wonder</p>

            </div>
        </div>

CodePudding user response：

Remove width: fit-content; on .card.

.book-section-title {
  text-align: center;
  font-family: 'Recoleta', sans-serif;
  font-size: 35px;
}

.card-img {
  width: 90%;
  height: 90%;
  border-radius: 5px;
}

.card-top {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e3dcee;
  border-radius: 7px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.book-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  gap: 20px
}

.book-title {
  text-align: center;
  width: 165px;
  color: #5a5a5a;
  font-family: 'Widy-Thin';
  font-size: 14px;
  color: black;
}

<div >
  <div class='card'>
    <div >
      <img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" >
    </div>
    <div >
      <p >Think Life Like A Monk</p>
    </div>
  </div>
  <div class='card'>
    <div  style="background-color: #f0edf5">
      <img src="https://bci.kinokuniya.com/jsp/images/book-img/97805/97805525/9780552565974.JPG" alt="card-1" >
    </div>
    <div >
      <p >Wonder</p>
    </div>
  </div>
</div>

CodePudding user response：

.card-top,
card,
img {
  width: 100%;
}

<center>
  <div >
    <div class='card'>
      <div >
        <img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" >
      </div>
      <div >
        <p >Think Life Like A Monk</p>
      </div>
    </div>
    <div class='card'>
      <div  style="background-color: #f0edf5">
        <img src="https://bci.kinokuniya.com/jsp/images/book-img/97805/97805525/9780552565974.JPG" alt="card-1" >
      </div>
      <div >

        <p >Wonder</p>

      </div>
    </div>
  </div>
</center>