I'm in the process of creating a responsive website and I've encountered an issue while using Bootstrap's columns and rows. It seems that the inner div with the class profile_left is not occupying the entire space within another div, leaving some empty space on each side.
Could you please help me identify what might be going wrong?
Below is a snippet of my code:
.profile_left{
border: 1px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.profile_picture{
padding:20px;
overflow: hidden;
}
<div class="container">
{% block content %}
<div class="row">
<div class="profile_left col-lg-8 col-md-8 col-sm-8 col-xs-12" style="width: 30%;">
<div style="background-color: #01226c; text-align:center; padding:20px;">
<h3 style="color: white;"><strong>PROFILE</strong></h3>
</div>
<div style="background-color: white;">
<div class="profile_picture">
<figure>
<img src="{{ student.profile_picture.url }}">
</figure>
{% if student.profile_picture == 'default.png' %}
<a href="">Add a picture</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock content %}
</div>