Currently, I am in the process of creating a profile card view and utilizing Bootstrap to achieve this.
I have set up two div elements - one with the class col-lg-3 and the other with col-lg-9. However, I am facing an issue where the content within col-lg-9 is not centrally aligned. Despite trying various methods like disabling margin and padding, the alignment remains off-center with more space on the right side compared to the left.
The col-lg-9 is nested within a row and a standard container, with the content housed inside it. You can view a sample demonstration on Bootply; by inspecting the container, you'll notice that the contents within the card class have excessive space on the right side.
Below is the HTML code snippet:
<div class="col-lg-9" style="min-height: 100px; background-color: #333">
<div class="container">
<div class="card">
<div class="model-image">
<img src="img/elliot.jpg">
</div>
<div class="card-content">
<a class="card-header">Team Fu</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="card-footer">
<a href="#">ds</a>
</div>
</div>
</div>
</div>
https://i.sstatic.net/K5bv7.png
I have uploaded the entire site for better visual clarification. Feel free to explore the website for enhanced understanding: demo