Pure.css 1-3 grid only shows 2 items per line

Question

The plan would be to get all three personal trainers on the same line,
but somehow Pure only shows 2 items per line, though there is enough space for the third one.

I've removed the paddings and there shouldn't be any extra margins that cause this problem.

How could I fix this?

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

Add pure-g class on an element wrapping all the columns.