I'm struggling to center the first image on my page. It seems to stretch on the right side, but there is still padding on the left side. I tried changing the padding in the bootstrap layout file to 0, but it didn't work. Am I overlooking something simple? I thought using container-fluid would make the image full width. I've attached a screenshot for reference.
Edit: I am using ASP.net MVC with Bootstrap.
@{
ViewBag.Title = "Digital Systems Malaysia";
}
<a id="Home"></a>
<div class="jumbotron">
<h1>Digital Systems Malaysia</h1>
</div>
<div class="container-fluid" style="width:100%; height: 100%; padding: 0 !important; margin: 0;";>
<img src="/Content/Images/background3.jpg";>
</div>
EDIT IMPORTANT
If anyone else is facing this issue, note that this is due to the MVC structure. The @RenderBody part is enclosed in a special div of class .body-content
The body-content class will automatically add margin to your entire page and cannot be overridden on the page itself. Therefore, if you want to remove the margin, you'll need to either edit the class or use absolute positioning to place something without considering the .body-content margin.