Hey there, I'm currently working on a website using Bootstrap 3 framework and I've run into a little snag. Whenever I add an image (just a regular one with an img tag), it seems to have some white space on both the left and right sides of the screen. You can check out the issue here: http://prntscr.com/9wuek5. It even overlaps with my navbar. What I'm trying to achieve is to remove that white space and center the image both horizontally and vertically. Here's the code I've been working with:
<nav id="mainNavbar" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#colaps">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ivke11080</a>
</div>
<div class="collapse navbar-collapse" id="colaps">
<ul class="nav navbar-nav navbar-right">
<li><a class ="page-scroll" href ="#">Home</a></li>
<li><a class="page-scroll" href="#">Projects</a></li>
<li><a class="page-scroll" href="#portfolio">About</a></li>
</ul>
</div>
</div>
</nav>
<img src="img/chase.jpg"/>
I attempted to put a border around the image to check if it was causing the white space, but it seems like it's just applying to the image itself.