Проблема с элементом H2

Question

Я пытаюсь получить элемент H2, заполненный «Портфолио», центрированным над элементами 2 img. У меня проблемы с этим. Прямо сейчас он застрял в левой части столбцов начальной загрузки 2 .col-md-4. Не могли бы вы указать мне в правильном направлении?

Адрес the codepen.

Вот код:

<div class="portf row"> 
    <h2>Portfolio</h2> 

    <div class="portfolio col-md-4"> 

    <img class="port1 img-responsive" src="https://s8.postimg.org/v4ol85ct1/hangman.jpg"> 
    <p>A game of hangman made with: HTML, CSS, and JavaScript.</p> 

    </div> 
    <div class="col-md-4 img-responsive"><img src="https://s8.postimg.org/3kagp7ctx/BFSkinner.jpg" alt="pic 2"> 
    <p>A B.F. Skinner tribute page made with: HTML and CSS.</p> 
    </div> 
</div> 

Answer 1

Ваш display:flex стиль на row класса является причиной этого. Добавление следующий CSS должен зафиксировать непосредственный вопрос:

.portf { 
    display: block; 
} 

Вы можете пересмотреть с помощью display:flex на row класса. Большая часть вашего CSS может быть упрощена, удалив его и центрируя столбцы col-md-8, добавив к ним класс col-md-offset-2.

Answer 2

Сначала необходимо удалить класс строк. Затем используйте класс col-md-6 для обоих изображений div. Надеюсь, это вам поможет.

<div class="portf"> 
     <h2>Portfolio</h2> 

     <div class="portfolio col-md-6"> 
     <img class="port1 img-responsive" src="https://s8.postimg.org/v4ol85ct1/hangman.jpg"> 
     <p>A game of hangman made with: HTML, CSS, and JavaScript.</p> 
     </div> 
     <div class="col-md-6 img-responsive"> 
     <img src="https://s8.postimg.org/3kagp7ctx/BFSkinner.jpg" alt="pic 2"> 
     <p>A B.F. Skinner tribute page made with: HTML and CSS.</p> 
     </div> 
    </div>