Why is my first post in my loop indented unexpectedly

When I display my posts using loops. My first post in my loop did gets indented unexpectedly. Below I will provide code and image of the indent.

code:

{% extends 'base.html' %}


{% block content %}


<br/>
<div class="container">   
<h1>Posts</h1>

<ul>
<br/>
{% for post in object_list %}
    {% if forloop.counter <= 15 %}

       
    <li><a href="{% url 'article-detail' post.pk %}"> {{post.title}}</a>
         -  {{ post.author.first_name }} {{ post.author.last_name }} <br/> {{post.body}}</li>
    <br/>
<style>
    a {
        text-transform: capitalize;
    }
</style>
</ul>

    {% endif %}
{% endfor %}

<a href="{% url 'home' %}" class="btn btn-secondary">Back</a>

{% endblock %}