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

Question

计划是让三位私人教练都在同一行，
但不知何故，Pure每行只显示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类。