html - Aligning images and text in a row -

i'm building site has 'meet team' page. 'team' section has 2 rows 3 sets of images text underneath. want rows aligned 1 under other @ minute can't make happen. here's code snippet -

.container {      margin: auto;      max-width: 100%;      padding-left: 10px !important;      padding-right: 10px !important;  }    #team div.row {    	height: 250px;    width: 100%;  	text-align: center;  	  }    section#team .four {    display: inline-block;    padding: 0;    margin: 0;    border: 0;      	  }

<section id="team">          <div class="container">              <div class="twelve columns">                               <h4>meet team</h4>                  <div class="row">                          <div class="four columns">                                  <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">                                  <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.                                  </p>                           </div>                                  <div class="four columns">                                  <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">                                  <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.                                  </p>                          </div>                          <div class="four columns">                                      <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">                                  <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>                          </div>                      </div>                                    <div class="row">                          <div class="four columns">                                      <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">                                  <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>                          </div>                          <div class="four columns">                                      <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">                                  <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>                          </div>                          <div class="four columns">                                      <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">                                  <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>                          </div>                  </div>              </div>          </div>                      </section>

do need 4 columns each image? align along row display rule? appreciated.

flexbox trick.

.container {    margin: auto;    max-width: 100%;    padding-left: 10px !important;    padding-right: 10px !important;  }    section#team .row {    display: flex;    margin-bottom: 1em;  }    section#team .row .four {    text-align: center;  }

<section id="team">    <div class="container">      <div class="twelve columns">        <h4>meet team</h4>        <div class="row">          <div class="four columns">            <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">            <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus              nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.            </p>          </div>          <div class="four columns">            <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">            <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus              nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.            </p>          </div>          <div class="four columns">            <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">            <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus              nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>          </div>        </div>          <div class="row">          <div class="four columns">            <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">            <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus              nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>          </div>          <div class="four columns">            <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">            <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus              nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>          </div>          <div class="four columns">            <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">            <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus              nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>          </div>        </div>      </div>    </div>  </section>