Текст Bootstrap 3 собирается в следующий контейнер при изменении размера страницы

Всякий раз, когда я изменяю размер веб-страницы, текст в навыках переполняется в следующий контейнер. Я не знаю, как это исправить. Есть идеи?

Это HTML:

  <div id="skills">
     <div class="container-fluid">
       <div class="row">
       <div class="col-md-4">
         <img class="img-circle" src="placehold.it/150x150">
         <h2>Skill 1</h2>
         <p>orem ipsum dolor sit amet, ad diam detracto eloquentiam eam, cum ei noster comprehensam. Ei est zril labores epicuri, vel ferri denique neglegentur ex. Malis feugiat denique cu vim. Ei mel nisl dolorum, ridens laoreet repudiandae qui </p>
         </div>
         <div class="col-md-4">
         <img class="img-circle" src="placehold.it/150x150">
         <h2>Skill 2</h2>
         <p>orem ipsum dolor sit amet, ad diam detracto eloquentiam eam, cum ei noster comprehensam. Ei est zril labores epicuri, vel ferri denique neglegentur ex. Malis feugiat denique cu vim. Ei mel nisl dolorum, ridens laoreet repudiandae qui </p>
         </div>
         <div class="col-md-4">
         <img class="img-circle" src="placehold.it/150x150">
         <h2>Skill 3</h2>
         <p>orem ipsum dolor sit amet, ad diam detracto eloquentiam eam, cum ei noster comprehensam. Ei est zril labores epicuri, vel ferri denique neglegentur ex. Malis feugiat denique cu vim. Ei mel nisl dolorum, ridens laoreet repudiandae qui </p>
         </div>
       </div>
     </div>
   </div>

И CSS:

#skills{
max-height: 100%;   
text-align: center;
background: #f6f6f6;
height: 300px;
padding-top: 50px;}