Вся информация печатается на одной строке

Я сделал файл django и в html показываю пользователю некоторую информацию, однако весь абзац информации печатается в одной строке. Я пытался поместить вокруг них div, но это не помогло. Я хочу, чтобы информация отображалась как обычная статья, а не вся в одной строке. Я думаю, что это может быть связано с размером какого-то div, но я не могу указать пальцем, в чем именно проблема. ps Я пытался сократить код, поэтому он такой неаккуратный.

{% block content %}
<div class = "container" >
<div class = "pl-5 ">
  <article class = "media content-section">
    <div>
      <div>
        <div id = "parent" >
          <div class = "">
            <br>
            <img class = "rounded-circle article-img" height = "75" width = "75" src = "{{ post.author.profile.image.url }}">
          </div>
             <div>
              <div class = "container">
                <a  class = "mr-2 text-secondary" href = "{% url 'user-posts' post.author.username %}"> <h4>{{ post.author }}</h4></a>
                <small class = "text-muted">{{ post.date_posted|date:"F d, Y" }}</small>
              </div>
               <div class = "container">
              {%if post.author == request.user%}
              &nbsp <a  href = "{% url 'post-delete' post.id %}"> <i title = "Delete Post" class = "far fa-trash-alt"></i></a> &nbsp |  <a  href = "{% url 'post-update' post.id %}">edit</a>
              {% endif %}
               </div>
           </div>
      </div>   
            <div class = "ml-3 ">
              <div class = "container">
            <h3>{{ post.title }}</h3>
            <p class = "article-content">{{ post.content }}</p>
            {% load static %}
            {% if post.image %}
            <div class = "container">
            <img id = "media" style = "max-width:95%;height:auto;" class = "" src = "{{ post.image.url }}" >
            <div>
              <div>
            <a href = "{{ post.image.url }}"><button class = "btn mt-2 mb-2"><i class = "fas fa-search-plus"></i>

</button></a></div>  
            </div>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </article>
</div>
</div>




<style type = "text/css">

.deletebutton {
  font-size: small;
  color: hotpink;

 }
 #viewallcomments{
  font-size: medium;
 }
 #container {
    width: 500px;
}
#first {
    width: 50px;
    float: left;
}
#second {
    width: 50px;
    float: left;
}
#third{
  width: 50px;
  float: right;
  margin-right: 25%;
}
#clear {
    clear: both;
}
 #reportcontainer {
    width: 100%;
}
#reportfirst {
    width: 250px;
    float: left;
}
#reportsecond {
    width: 50px;
    float: left;
}

</style>
</div>













































{% endblock %}