How to remove margin from an image?

Question

Typesetting

Gentlemen) help me figure out what kind of strip I have to the right of pictures 1 and 3, how to remove it?

At first I thought that the picture was not narrow enough, but I made it wider and lower, but the strip remains. In the developer tools in the browser, do not hover over this strip to view the block. Here is the html page :

<div class="zag">Наши услуги</div>
  <div class="grid">
<div style="width: 30% ;float:left;margin-left:2.5%">
          <figure class="andrei">
            <img src="http://vh166963.eurodir.ru/wp-content/themes/gymbalance/images/test_lesnaya.jpg" alt="секция художественной гимнастики спб"/>
            <figcaption>
              <h2><span>Групповые тренировки</span></h2>
              <p>Занятия в группах не более 8 человек 2 раза в неделю по 1 часу</p>
              <a href="#">Подробнее</a>
            </figcaption>			
          </figure>

<a href="#win1" style="color:#fff;" class="box-button2" >Подробнее и запись</a>

<a href="#x" class="overlay_det" id="win1"></a>
        <div class="popup_det">
            <form method="post" action="javascript:void(0);" onsubmit="send_form();" id="forma">
<input type="text" name="fio" placeholder="Ф.И.О" />
<input type="text" name="phone" placeholder="Телефон" />
<input type="text" name="email" placeholder="Возраст девочки" />
<input type="text" name="adres" placeholder="Адрес зала" />
<textarea type="text" placeholder="Комментарий"></textarea>
<br/>
<button type="submit" value="отправить" /> Записаться </button>
</form>
<a class="close_det" title="Закрыть" href="#close_det"></a>
        </div>



</div>
<div style="width: 30%; float:left;margin-left:2.5%">
<figure class="andrei">
            <img src="http://vh166963.eurodir.ru/wp-content/themes/gymbalance/images/gymnastika.jpg" alt="img18"/>
            <figcaption>
              <h2><span>Индивидуальные занятия</span></h2>
              <p>Персональные тренировки по индивидуальному плану, исходя из конкретных потребностей гимнастки</p>
              <a href="#">Подробнее</a>
            </figcaption>			
          </figure>

<a href="#win2" style="color:#fff;" class="box-button2" >Подробнее и запись</a>
<a href="#x" class="overlay_det" id="win2"></a>
        <div class="popup_det">
            <form method="post" action="javascript:void(0);" onsubmit="send_form();" id="forma">
<input type="text" name="fio" placeholder="Ф.И.О" />
<input type="text" name="phone" placeholder="Телефон" />
<input type="text" name="email" placeholder="Возраст девочки" />
<input type="text" name="adres" placeholder="Адрес зала" />
<textarea type="text" placeholder="Комментарий"></textarea>
<br/>
<button type="submit" value="отправить" /> Записаться </button>
</form>
<a class="close_det" title="Закрыть" href="#close_det"></a>
        </div>


</div>
  <div style="width: 30%; float:left;margin-left:2.5%;">				<figure class="andrei">
            <img src="http://vh166963.eurodir.ru/wp-content/themes/gymbalance/images/sostavlenie-uprazhnenij-vystupleniya.jpg" alt="составление программы выступления на соревнованиях"/>
            <figcaption>
              <h2><span>Составление выступлений</span></h2>
              <p>Составление уникальных упражнений для выступления на соревнованиях по художественной гимнастике</p>
              <a href="#">Подробнее</a>
            </figcaption>			
          </figure>

<a href="#win3" style="color:#fff;" class="box-button2" >Подробнее и запись</a>




<a href="#x" class="overlay_det" id="win3"></a>
        <div class="popup_det">
            <form method="post" action="javascript:void(0);" onsubmit="send_form();" id="forma">
<input type="text" name="fio" placeholder="Ф.И.О" />
<input type="text" name="phone" placeholder="Телефон" />
<input type="text" name="email" placeholder="Возраст девочки" />
<input type="text" name="adres" placeholder="Адрес зала" />
<textarea type="text" placeholder="Комментарий"></textarea>
<br/>
<button type="submit" value="отправить" /> Записаться </button>
</form>
<a class="close_det" title="Закрыть" href="#close_det"></a>
        </div>

</div>
        </div>
  </div>
  <div class="zag">Отзывы</div>

here is the css:

.grid {
  position: relative;
  clear: both;
  margin: 0 auto;
  padding: 1em 0 4em;
  width: 96%;
  list-style: none;
  text-align: center;
height: 400px;
}

/* Common style */
.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  
  width: 100%;
  height: auto;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}

.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}

.grid figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.grid figure h2 {
  word-spacing: -0.15em;
  font-weight: 300;
}

.grid figure h2 span {
font-size: 2.2vw;
font-family: 'Roboto', sans-serif;
font-weight: 900;
color: #FCDDE7;
text-shadow: 4px 4px 6px #000;
}

.grid figure h2,
.grid figure p {
  margin: 0;
}

.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
font-size: 1.2vw;
font-family: 'Roboto', sans-serif;
font-weight: 900;
text-shadow: 2px 2px 4px #000;
}


/***** Apollo *****/
/*-----------------*/

figure.andrei {
  background: #3498db;
}

figure.andrei img {
  opacity: 0.95;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale3d(1.05,1.05,1);
  transform: scale3d(1.05,1.05,1);
}

figure.andrei figcaption::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5);
  content: '';
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
  transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.andrei p {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 1em;
  padding: 0 1em;
  max-width: 250px;
  border-right: 4px solid #fff;
  text-align: right;
  opacity: 0;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.andrei h2 {
  text-align: left;
}

figure.andrei:hover img {
  opacity: 0.6;
  -webkit-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
}

figure.andrei:hover figcaption::before {
  -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
  transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.andrei:hover p {
  opacity: 1;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

Answer 1

well, the picture does not occupy the entire width of the block! Add in style2.css file on line 362

.grid figure img {
  ...
 width: 100%;
}

Answer 2

remove in style.css file on line 899

img {
  width: 330px;
}