<div id="Project" class="bg-white fnt-white brdr project-div ">
<div class="float-left image-for-project-container brdr">
<img src="{% static './Images/manworking.webp' %}" alt="manworking" height="630px">
</div>
{% for project in project_details %}
<div class=" project-container inline-block ">
<h2 class="text-center fnt-black head-portfolio">
{{project.project_name}}
</h2>
<br>
<br>
<p class="margin-auto txt-portfolio roboto hover-orange fnt-black">
{{project.project_details}}
</p>
<br>
<a href="#" class="buttons read-more fnt-black">Read More</a>
</div>
{% endfor %}
</div>
Challenge: When generating project containers dynamically from Django model, each container creates an unintended margin or indentation as shown in the attached image. How can I resolve this issue?
This code snippet is presented without any associated CSS stylesheet. Viewing the HTML standalone shows no issues, but when integrated with Django to display dynamic content, a gap appears between containers. An image illustrating the problem can be found here: (https://i.sstatic.net/EnUUG.png).