Layout. Images. The second row is displayed differently than the first

Question

HTML

Hello.
I can't understand the reason.
Here is the site , in the "Our Portfolio" section, the items from the second row are displayed differently than from the first. They are moving out.
The code for the pictures is:

.row img{
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
  height: auto;
}

Be sure to leave "height: auto" so that the pictures are responsive .
If, for example, set a fixed height

.row img{
       height: 300px;
}

That's all right, but this option is not suitable, because. Images change aspect ratio if viewport changes.
What could be the reason?

Answer 1

You should either replace the float with an inline block or insert it through js after every third block

.clear{
            clear: both;
            font-size: 0;
            line-height: 0;
            height: 0;
            overflow: hidden;
        }

or without js insert handles in your case it's even better

Answer 2

Try something like this codepen.io/iiil/pen/zJrvL
Why produce so many classes? write the row class, but in fact it is a cell, not a row.
In your case, such a transfer occurs due to the fact that picture number 3 has a height of 298 pixels, and the rest - 299. The blocks behave quite normally in this case.
upd: drive in instead of the third <img src="images/3.png" style="height: 299px;">
Everything will be ok. But it is better to move away from such dependence on the size of the pictures.

Answer 3

offhand two options, for modern:

.row:nth-child(3n) {
  clear:left;
}

for old:

.row{
  display: inline;
  *zoom: 1;
  display: inline-block;
  .... 
}