CSS layout problem: where does the step come from?

Question

css

I'm trying to write a template for a site, I want the pictures to jump to the line below when the window is resized. Actually, everything works, the pictures jump, but it is not clear where this step comes from (see the picture):

Moreover, when the window is resized, the step does not go anywhere, and also jumps to the next line. I have very little experience with CSS, please help.

HTML/CSS code

<style>
.gallery_item {
    border: dashed 1px red;
    float: left;
    wi dth: 10%:
}
.gallery_item img{
    max-width: 100%;
}
</style>

<div class="gallery_item">
    <img src="images/13.jpg">
</div>
<div class="gallery_item">
    <img src="images/14.jpg">
</div>
<div class="gallery_item">
    <img src="images/15.jpg">
</div>
<div class="gallery_item">
    <img src="images/16.jpg">
</div>
<div class="gallery_item">
    <img src="images/17.jpg">
</div>
<div class="gallery_item">
    <img src="images/18.jpg">
</div>
<div class="gallery_item">
    <img src="images/19.jpg">
</div>
<div class="gallery_item">
    <img src="images/20.jpg">
</div>
<div class="gallery_item">
    <img src="images/21.jpg">
</div>
<div class="gallery_item">
    <img src="images/22.jpg">
</div>
<div class="gallery_item">
    <img src="images/23.jpg">
</div>
<div class="gallery_item">
    <img src="images/24.jpg">
</div>
<div class="gallery_item">
    <img src="images/25.jpg">
</div>
<div class="gallery_item">
    <img src="images/26.jpg">
</div>

Archive with all pictures and html: https://yadi.sk/d/oZNai0gmadQ5G

Answer 1

Variants codepen.io/cleric/pen/ECsGK