Elements go outside their parent container - html

Question

I have an issue that I'm running into. I'm using the grid.css file. The classes that are not mentioned are empty.
So the problem is that when there are 3 columns with images that (in pixels) are realy big in the MAIN ARTICLE AREA. They go over the size of the container. And into the SIDEBAR area. How could I fix this issue?
I hope I'm clear enough, if not let me know, I fill fix it. :)
EDIT I figured out the issue. I had to add this to the css and now the images don't go over their size.
.related articles img{
width: 100%;
}
With this it works fine.
<section class="article">
<div class="row">
<!--MAIN ARTICLE AREA-->
<div class="col span-2-of-3 col-left">
<div class="related-articles">
<div class="col span-1-of-3">
<a href="#">
<img src="img/test_img.jpg" alt="test-img">
<h3>This is a test article, I'm just trying out new things and lets see how this goes.</h3>
</a>
</div>
<div class="col span-1-of-3">
<a href="#">
<img src="img/test_img.jpg" alt="test-img">
<h3>This is a test article, I'm just trying out new things and lets see how this goes.</h3>
</a>
</div>
<div class="col span-1-of-3">
<a href="#">
<img src="img/test_img.jpg" alt="test-img">
<h3>This is a test article, I'm just trying out new things and lets see how this goes.</h3>
</a>
</div>
</div>
</div>
<!--SIDEBAR STARTS-->
<div class="col span-1-of-3 col-right">
</div>
</div>
</section>
And the CSS
.row{
max-width: 1140px;
margin: 0 auto;
}
.article .col {
display: block;
float:left;
margin: 0.5% 0 0.5% 0;
}
.span-2-of-3 {
width: 66.13%;
}
.span-1-of-3 {
width: 32.26%;
}
.col-left{
border-top: 2px solid #f5f5f5;
float: left;
}
.col-right{
float: right;
/*THE HEIGHT AND COLOR IS JUST SO I KNOW HOW IT WILL LOOK*/
height:800px;
color:aqua;
}

Answer 1

JSfiddle:
https://jsfiddle.net/ua7o3pf9/
Corrected Code:
.col {
display: block;
float:left;
margin: 1% 0 1% 1%;
}
.span-2-of-3 {
width: 64.6%;
}
.span-1-of-3 {
width: 31.6%;
}
You calculated your widths and margins false. Fixed it for you. It must be 100% or below in total.
Edit:
Also fixed sidebar color for you: https://jsfiddle.net/ua7o3pf9/1/
Edit 2: Fixed Code for your edited question:
Fiddle:
https://jsfiddle.net/ua7o3pf9/9/
Code:
<div class="related-articles article">
You forgot to add the class article, this is why the float:left wasnt added to your cols.

Answer 2

Change your .col style to:
.col {
display: block;
float:left;
margin: 1% 0 1% 1%;
}