I'm currently working on my blog and I want new posts to be displayed next to each other, rather than stacked on top of one another. I have these cards set up, but they keep stacking underneath each other. If you need more of my code to help me out, please let me know.
Any assistance would be greatly appreciated!
I'd like it to look something like this
post.html
{% extends "online_shop/base.html" %}
{% load static %}
{% block content %}
{% for post in posts %}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="margin-top: 35px;"></div>
<div class="card-deck" style="max-width: 300px;">
<div class="card row">
<img class="card-img-top" src="{% static 'online_shop/unicorn-cake-14.jpg'%}" alt="Card image cap" width="300" height="310">
<div class="card-body">
<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
<p class="card-text">{{ post.content }}</p>
{{ post.content|truncatewords_html:15 }}
</div>
<div class="card-footer">
<small class="text-muted"><a href="#">{{ post.author }}</a></small>
<small class="text-muted" style="margin-left: 5px;">{{ post.date_posted|date:"F d, Y" }}</small>
</div>
</div>
</div>
</body>
{% endfor %}
{% endblock content %}