Problem with responsivity of card in grid layout of css

Issue

[https://codepen.io/TA0011/pen/VwXKKgG]

When viewed in mobile version, the width of the card exceeds the Content hr (horizontal line). What can be done so that it does not exceed the horizontal line? Do not go with the 5 fr or 1fr unit. I can manage the 1 fr or 5fr scene. But only problem is with the card that exceeds the hr line which is blue in color.

.container-a {
  margin-top: 10px;
  width: calc(100% - 100px);
  margin: 10px auto;
  position: relative;
}

.container-a span {
  background-color: #007bff;
  padding: 5px 10px;
  position: relative;
  color: #fff;
  z-index: -1;
  background-blend-mode: multiply;
}

.container-a hr {
  width: 100%;
  color: #007bff;
  margin-top: 4px;
  height: 1px;
  position: relative;
  z-index: -2;
}

.container-a .wrapper {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: "blog-container blog-container blog-container blog-container blog-sidebar";
  grid-gap: 10px;
}

.container-a .blog-container {
  grid-area: blog-container;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  grid-gap: 10px;
}

.card {
  min-width: 280px;
  flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  height: 180px;
  width: 100%;
  border: 1px solid #ccc;
  background: #FF7F50;
  font-weight: 500 !important;
  position: relative;
  color: #fff;
}

.container-a .blog-sidebar {
  grid-area: blog-sidebar;
}

.blog-sidebar .widgets {
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  grid-gap: 10px;
  padding: 5px;
}

.widgets img {
  width: 100%;
  float: none;
  display: block;
  object-fit: fill;
}

.blog-sidebar h3 {
  color: #007bff;
  text-align: center;
  margin-top: 2px 0 2px 0;
  margin: -1px 0 -1px 0;
}

@media(max-width: 768px) {
  .container-a {
    width: calc(100% - 60px);
  }
  .container-a span {
    font-size: 12px;
  }
  .container-a hr {
    margin-top: 3px;
  }
  .container-a {
    width: calc(100% - 60px);
    margin-bottom: 100px;
  }
  .container-a .wrapper {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-template-areas: "blog-container" "blog-sidebar";
  }
  .card {
    min-width: 244px;
  }
}

<section class="container-a" aria-label="blog-content">
  <span>Content</span>
  
  <hr>
  
  <div class="wrapper">
    <div class="blog-container">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
      <div class="card">Card 4</div>
      <div class="card">Card 5</div>
    </div>
    
    <div class="blog-sidebar">
      <h3>Sidebar</h3>
      
      <div class="widgets">
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
      </div>
    </div>
  </div>
</section>

Solution

[I have done it , you can view it][1]

  [1]: https://codepen.io/TA0011/pen/ZExJgmr

Answered By - techieafrohead