Не могу нормально расположить карточки блога в 2 колонки

Question

Мне надо карточки статей блогов расположить в 2 колонки. Работаю с Django. Чтоб когда через админку добавлялась новая статься, она на странице блога заняла свое место, но чтобы было именно 2 колонки, чтоб не менялась эта цифра. Сначала карточки выстраиваются правильно, но потом не знаю почему все съезжает и криво получается. Это html страницы блога:

{% extends 'projects/base.html' %}
{% load static %}
    {% block 'content'%}
        <h1 class="count"><b>{{all_posts.count}} Blog{{all_posts.count|pluralize}} here</b></h1>
        <div class="container">
            {% for post in all_posts %}
                <div class="card">
                    <div class="blog_a">
                        <h2>{{ post.title }}</h2>
                    </div>
                    <div class="blog_date">
                        <h5>-- {{ post.dateofpost|date:'j M Y'|upper}} --</h5>
                    </div>
                    <div class="blog_desc">
                        <h3>{{ post.desc|striptags|truncatechars:600}}</h3>
                    </div>
                     
                </div>
            {%endfor%}
        </div>
    {%endblock%}

Это css страницы блога:

*{
    box-sizing:border-box;
}
a{

    text-decoration: none;
   
    
}
.container{
    padding-left: 5%;
    vertical-align: baseline;
    

}

.card{  
    display: inline-block;
    width: 45%;
    height: 650px;
    border: black;
    background-color: rgb(241, 252, 230);
    border-radius: 40px;
    padding: 40px;
    margin: 20px;
}

.card:hover{
    box-shadow: 0 0 30px rgba(59, 47, 61, 0.5);
    transition: 300ms;
}

.blog_a{
    text-align: center;
    text-decoration: none;
    color: rgb(112, 27, 38);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 35px;
    margin-bottom: 0;
}
.blog_desc{
    text-align: center;
    color: rgb(56, 43, 94);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    text-decoration: none;
}

.blog_date{
    text-align: center;
    font-family: 'Inconsolata', monospace;
    font-weight: 700;
    font-size: 20px;
    color:rgb(133, 73, 66);
    margin-top: 8px;
    text-decoration: none;
    margin-bottom: 30px;
    
}

.count{
    text-align: center;
    color: rgb(133, 73, 66);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 35px;
    margin-top: 6%;
    margin-bottom: 5%;
}

Это base.html шаблон для других страничек, его наследует страница блога

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'projects/style.css' %}">
    <link rel="stylesheet" href="{% static 'blog/blog.css' %}">
    <link rel="stylesheet" href="{% static 'blog/detail.css' %}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&family=Poppins:wght@300;400&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
    <title>kipkeev2.0</title>
</head>
<body>
    <nav>
        <span class="logo_text">kipkeev 2.0</span>
        <div class="links">
            <a class="inst" href="https://instagram.com">Instagram</a>
            <a class = "resume" href="{% static 'projects/resume.pdf' %}">Resume</a>
            <a class="blog_btn" href="{% url 'blog:blogpage' %}"><div class="btndiv">Blog</div></a>
        </div>
    </nav>
      {% block 'content'%}{% endblock %}
</body>
</html>

БЛОГ НА HUSL

Не могу нормально расположить карточки блога в 2 колонки

Ответы (0 шт):