Html – Not able to display validation error messages properly

My error messages are getting displayed on the top of the page, but also the messages are getting duplicated, meaning they are getting displayed next to the individual fields as well

 <div class="w3-half w3-center w3-border w3-round w3-border-black" style="width: 40%;">
    <div class="w3-card-4 w3-border w3-border-black w3-pale-blue" >
        <h4> Registration Form</h4>
    </div>
    
    <form method="post" action="">
  
        {% if form.errors %}
        <!-- {% for field, errors in form.errors.items %} -->
        <ul class="messages w3-red">
            {% for error in errors %}
            <li> {{ error }} </li>
            {% endfor %}
        </ul>
        <!-- {% endfor %} -->
        {% endif %}
        
        {% csrf_token %}
        {{form.as_p}}

    <input type="submit" class="w3-button w3-black w3-round  w3-hover-red" value="Register" style="margin-left: 25px;">
    </form>
    <p> Already signed up? Please <a href="{% url 'user_login' %}" > Login </a> </p>
       
</div>