title: How to add styling in django templates inside for loop using css?
body: <p>I am making a simple blog project in which I am trying to inject each post's data using for loop template tagging. But in doing so, the grid becomes distorted when css is applied on blog list template. However this css works perfectly fine when tested on manually added posts inside a separate Html page.</p>
  
  <p>How to fix this because most of the css that works fine on normal Html pages doesn't work properly when combined with django templates.</p>
  
  <p>Here is my Basic Blog Posts template:</p>
  
  <pre><code>{% extends 'basic_app/base.html' %}
  
  {% block content %}
  &lt;div class="centerstage"&gt;
      {% for post in post_list %}
  
      &lt;div class="cards"&gt;
        &lt;div class="card"&gt;
          &lt;img class="card__image" src="{{ post.blog_pic.url }}" alt=""&gt;
          &lt;div class="card__content"&gt;
            &lt;p&gt;
              &lt;a href="{% url 'post_detail' pk=post.pk %}"&gt;{{ post.title }}&lt;/a&gt;
            &lt;/p&gt;
            &lt;p&gt;
              {{ post.text|safe|linebreaksbr }}
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="card__info"&gt;
            &lt;div&gt;
              &lt;i class="material-icons"&gt;{{ post.published_date|date:"D M Y"}}&lt;/i&gt;310
            &lt;/div&gt;
            &lt;div&gt;
              &lt;a href="{% url 'post_detail' pk=post.pk %}" class="card__link"&gt;Comments: {{ post.approve_comments.count }}&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      {% endfor %}
  &lt;/div&gt;
  {% endblock %}
  
  </code></pre>
  
  <p><strong>Html Code that works fine on manually adding posts:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="cards_style.css"&gt;
      &lt;title&gt;Blog&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;div class="cards"&gt;
    &lt;div class="card"&gt;
      &lt;img class="card__image" src="https://fakeimg.pl/400x300/009578/fff/" alt=""&gt;
      &lt;div class="card__content"&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ducimus id ab tenetur delectus reiciendis fugit autem qui at.
        &lt;/p&gt;
        &lt;p&gt;
          Alias itaque praesentium eum, pariatur consequatur ducimus asperiores accusantium velit minima?
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="card__info"&gt;
        &lt;div&gt;
          &lt;i class="material-icons"&gt;thumb_up&lt;/i&gt;310
        &lt;/div&gt;
        &lt;div&gt;
          &lt;a href="./" class="card__link"&gt;View Article&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
      &lt;img class="card__image" src="https://fakeimg.pl/400x300/252c6a/fff/" alt=""&gt;
      &lt;div class="card__content"&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ducimus id ab tenetur delectus reiciendis fugit autem qui at.
        &lt;/p&gt;
        &lt;p&gt;
          Alias itaque praesentium eum, pariatur consequatur ducimus asperiores accusantium velit minima?
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="card__info"&gt;
        &lt;div&gt;
          &lt;i class="material-icons"&gt;thumb_up&lt;/i&gt;1,993
        &lt;/div&gt;
        &lt;div&gt;
          &lt;a href="./" class="card__link"&gt;View Article&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
      &lt;img class="card__image" src="https://fakeimg.pl/400x300/f1db26/000/" alt=""&gt;
      &lt;div class="card__content"&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ducimus id ab tenetur delectus reiciendis fugit autem qui at.
        &lt;/p&gt;
        &lt;p&gt;
          Alias itaque praesentium eum, pariatur consequatur ducimus asperiores accusantium velit minima?
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="card__info"&gt;
        &lt;div&gt;
          &lt;i class="material-icons"&gt;thumb_up&lt;/i&gt;887
        &lt;/div&gt;
        &lt;div&gt;
          &lt;a href="./" class="card__link"&gt;View Article&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
      &lt;img class="card__image" src="https://fakeimg.pl/400x300/252c6a/fff/" alt=""&gt;
      &lt;div class="card__content"&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ducimus id ab tenetur delectus reiciendis fugit autem qui at.
        &lt;/p&gt;
        &lt;p&gt;
          Alias itaque praesentium eum, pariatur consequatur ducimus asperiores accusantium velit minima?
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="card__info"&gt;
        &lt;div&gt;
          &lt;i class="material-icons"&gt;thumb_up&lt;/i&gt;2,512
        &lt;/div&gt;
        &lt;div&gt;
          &lt;a href="./" class="card__link"&gt;View Article&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
      &lt;img class="card__image" src="https://fakeimg.pl/400x300/009578/fff/" alt=""&gt;
      &lt;div class="card__content"&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ducimus id ab tenetur delectus reiciendis fugit autem qui at.
        &lt;/p&gt;
        &lt;p&gt;
          Alias itaque praesentium eum, pariatur consequatur ducimus asperiores accusantium velit minima?
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="card__info"&gt;
        &lt;div&gt;
          &lt;i class="material-icons"&gt;thumb_up&lt;/i&gt;140
        &lt;/div&gt;
        &lt;div&gt;
          &lt;a href="./" class="card__link"&gt;View Article&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  
  </code></pre>
  
  <p><strong>Css:</strong></p>
  
  <pre><code>.cards {
      margin: 0 auto;
      max-width: 1000px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
      grid-auto-rows: auto;
      gap: 20px;
      font-family: sans-serif;
      padding-top: 30px;
  }
  
  .cards * {
      box-sizing: border-box;
  }
  
  .card__image {
      width: 100%;
      height: 150px;
      object-fit: cover;
      display: block;
      border-top: 2px solid #333333;
      border-right: 2px solid #333333;
      border-left: 2px solid #333333;
  }
  
  .card__content {
      line-height: 1.5;
      font-size: 0.9em;
      padding: 15px;
      background: #fafafa;
      border-right: 2px solid #333333;
      border-left: 2px solid #333333;
  }
  
  .card__content &gt; p:first-of-type {
      margin-top: 0;
  }
  
  .card__content &gt; p:last-of-type {
      margin-bottom: 0;
  }
  
  .card__info {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #555555;
      background: #eeeeee;
      font-size: 0.8em;
      border-bottom: 2px solid #333333;
      border-right: 2px solid #333333;
      border-left: 2px solid #333333;
  }
  
  .card__info i {
      font-size: 0.9em;
      margin-right: 8px;
  }
  
  .card__link {
      color: #64968c;
      text-decoration: none;
  }
  
  .card__link:hover {
      text-decoration: underline;
  }
  
  
  </code></pre>
  
  <p>I am a newbie in Django, so please provide some solution to this problem.</p>