Need Images Touching Together, No Gutter - html

Question

Hey StackOverFlow Community,
I need to get these images touching together. They will eventually be much larger and touching the edge of the browser. These will be tiles that lead to examples of film work, currently have placeholder images.
I have tried and tried to get these images touching, but I'm not sure what is going on... set the margin and padding to 0.
Here is the code.
HTML
<section id="video-section" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Video Production</h2>
<hr class="small">
</div>
<div class="container-fluid full-width has-inner">
<div class="row row-no-gutter">
<div class="col-md-4 nogut">
<div id="image1" class="video-item">
<a href="https://vimeo.com/208403633">
<img id="portfolio1" class="img-full-width" src="img/image1.jpg">
</a>
</div>
</div>
<div class="col-md-4 nogut">
<div id="image2" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image2.jpg">
</a>
</div>
</div>
<div class="col-md-4 nogut">
<div id="image3" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image3.jpg">
</a>
</div>
</div>
</div>
<div class="row row-no-gutter">
<div class="col-md-4">
<div id="image4" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image4.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div id="image5" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image5.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div id ="image6" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image6.jpg">
</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
CSS
#video-section {
padding: 10px;
background: #353030;
color: white;
}
.containter-fluid .full-width {
padding-left: 0px;
padding-right: 0px;
overflow-x: hidden;
}
.row .row-no-gutter {
margin: 0px;
padding: 0px;
}
.nogut {
margin: 0px;
}
.img-full-width {
width: 100.5%;
height: auto;
}
Been spending a few hours trying to figure this out, what am I doing wrong?

Answer 1

Paddings are not on rows but on cols.
And it's not margin, so you .nogut will not work :)
You had almost the right answer, try this :
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
Then in your html :
<div class="row no-gutter">

Answer 2

First, right click in browser and use inspect (I think it is best in chrome.) Klick on this icon. Hover over your images and you will able to see which element the gap belongs to. When clicking the element you can in the styles section untick (and add) different css properties and see what happens. Very powerfull tool.
For you, I would also recommend to add padding: 0px; to .nogot and add that class to the second row also.