Pure.css 1-3网格每行仅显示2个项目

Question

计划是将所有三位私人教练放在同一条线上，但不过纯粹的每条线只显示2个项目，尽管第三个空间有足够的空间。

我删除了填充，并且不应该有任何额外的边距导致此问题。

我该如何解决这个问题？

HTML

<section id="pt">
                <h2>Personal Trainer </h2>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet dapibus quam, sit amet tempor felis egestas et. In eu metus ultrices, 
                    luctus nunc egestas, euismod magna. 
                    Pellentesque ex nunc, sodales et ultricies id
                </p>

                <div class="pt-holder pure-u-1-3">

                <img src="Images/pt/img3.jpg" />

                <span> 

                    Just some Lorem Ipsum here.

                </span>


                </div>

                <div class="pt-holder pure-u-1-3">

                <img src="Images/pt/img2.jpg" alt="Jenni Tuokko" />

                <span> 

                    Just some Lorem Ipsum here.

                </span>


                </div>

                <div class="pt-holder pure-u-1-3">

                <img src="Images/pt/img1.jpg" alt="Jenni Tuokko" />

                <span> 

                   Just some Lorem Ipsum here.

                </span>

CSS

.pt-holder {
max-width: 100%;
height: auto;
margin: 0 auto;
display: block;
}

.pt-holder img {
border-radius: 100%;
width: 120px;
height: 120px;
display: block;
margin: 0 auto;
}

.pt-holder span {
display: block;
padding: 30px;
width: 90%;
text-align: center;
}

Answer 1

在包装所有列的元素上添加pure-g类。