Не удается правильно разместить с помощью начальной загрузки

Question

Я пытаюсь сделать отзывчивый пост в блоге. Все отлично работает, но мне не нравится, как это выглядит. Я хотел бы иметь решение, когда мой пост в блоге с самим изображением будет центрирован. В настольной версии это менее заметно, но на мобильном устройстве это выглядит ужасно ... Я сейчас использую bootstrap 4, но если у вас есть решения с css, я тоже был бы очень рад! Мне нужно что-то похожее на изображение:

Настольная версия

Мобильная версия

Вотмоя модель html + bootstrap:

{% extends 'blog/base.html' %}
{% block content %}
  <article class="media content-section">
    <img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}" alt="">
    <div class="media-body">
      <div class="article-metadata">
        <a class="mr-2 author_title" href="{% url 'user-posts' object.author.username %}">@{{ object.author }}</a>
        <small class="text-muted">{{ object.date_posted|date:"N d, Y" }}</small>

        <div>
          <!-- category section -->
          <small class="text-muted">
            Categories:&nbsp;
            {% for category in post.categories.all %}
            <a href="{% url 'blog_category' category.name %}">
              {{ category.name }}
            </a>&nbsp;
            {% endfor %}
          </small>
        </div>

        {% if object.author == user %}
          <div>
            <a class='btn btn-secondary btn-sm mt-1 mb-1' href="{% url 'post-update' object.id %}">Update</a>
            <a class='btn btn-danger btn-sm mt-1 mb-1' href="{% url 'post-delete' object.id %}">Delete</a>
          </div>
        {% endif %}
      </div>

      <img class="img-fluid center" id="rcorners3" src="{{ object.image.url }}" alt="none">
      <h2 class="article-title text-center">{{ object.title }}</h2>
      <p class="article-content">{{ object.content }}</p>
    </div>
  </article>
{% endblock content %}

И некоторый код из блока base.html:

<main role="main" class="container">
      <div class="row">
        <div class="col-md-8">
          {% if messages  %}
            {% for message in messages %}
              <div class="alert alert-{{ message.tags }}"> <!--grabbing bootstrap tag for displaying alert, info etc. -->
                {{ message }}
              </div>
            {% endfor %}
          {% endif %}
          {% block content %}{% endblock %}
        </div>
        <div class="col-md-4">
          <div class="content-section">
            <h3>Sidebar</h3>
            <p class='text-muted'>Explore smth new today!
              <ul class="list-group article-metadata">
                <li class="list-group-item list-group-item-light"><a class="author_title" href="{% url 'blog-home' %}">Latest Posts</a></li>
                <li class="list-group-item list-group-item-light"><a class="author_title" href="">Links</a></li>
                <li class="list-group-item list-group-item-light">Calendars</li>
                <li class="list-group-item list-group-item-light">etc</li>
              </ul>
            </p>
          </div>
        </div>
      </div>
    </main>