how do i make the image take the full width of the screen? (html, css)

Question

as the title says, im just wondering how to remove the remaining white borders on the right, left and in between the navbar on the top in order for the image to take up the entire width.

heres what i tried to code (theres bootstrap):

CSS:

.img_banner {
  min-height : 100%;
  min-width : 100%;
  background-size:100% 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

HTML

  <div class="container-full col-md-12">
      <img src="img/banner1.jpg" class="center-block img_banner img-responsive portfolio-box">
  </div>

Answer 1

that white space is usually caused by margin in the body. try adding

margin: 0;

to the body element

---

EDIT

I just realized you said you're using bootstrap, my best guess is that there's 15px padding on the right and left of column elements. So try adding set these properties in the row element:

margin-left: -15px;
margin-right: -15px;
width: calc(100% + 30px);