Нужно некоторое руководство относительно контейнеров div

Question

, поэтому я пытаюсь изучить веб-разработчик в свое время простоя, и я новичок ie.
Я скачал шаблоны с templated.co ( Вот этот и был ковыряясь в вещах, пытаясь учиться, как я go.
Так что моя проблема в том, что есть, так сказать, «галерея», и мои вертикальные картинки кошек автоматически поворачиваются, чтобы поместиться в контейнере, и портят их, и я не могу жизнь меня понять, как это работает.
Буду очень признателен за любую помощь здесь. Спасибо за чтение

/* Gallery */

.gallery {
  width              : 100%;
  margin             : 0;
  display            : -moz-flex;
  display            : -webkit-flex;
  display            : -ms-flex;
  display            : flex;
  -moz-flex-wrap     : wrap;
  -webkit-flex-wrap  : wrap;
  -ms-flex-wrap      : wrap;
  flex-wrap          : wrap;
  -moz-align-items   : stretch;
  -webkit-align-items: stretch;
  -ms-align-items    : stretch;
  align-items        : stretch;
}

.gallery .image.fit {
  margin: 0;
}

.gallery > * {
  -moz-flex-shrink   : 1;
  -webkit-flex-shrink: 1;
  -ms-flex-shrink    : 1;
  flex-shrink        : 1;
  -moz-flex-grow     : 0;
  -webkit-flex-grow  : 0;
  -ms-flex-grow      : 0;
  flex-grow          : 0;
}
.gallery > * {
  width: 50%;
}

@media screen and (max-width: 980px) {
  .gallery > * { width: 100%; }
}

<div class="content">
  <div class="gallery">
    <div>
      <div class="image fit">
        <a href="images/pic03.jpg">
          <img src="images/pic02.jpg" alt="" />
        </a>
      </div>
    </div>
    <div>
      <div class="image fit">
        <a href="images/pic01.jpg">
          <img src="images/pic03.jpg" alt="" />
        </a>
      </div>
    </div>
    <div>
      <div class="image fit">
        <a href="images/pic04.jpg">
          <img src="images/pic04.jpg" alt="" />
        </a>
    </div>
  </div>