計画では、3 人のパーソナル トレーナーすべてを同じ行に配置することになりますが、
Pure では 1 行に 2 つのアイテムしか表示されませんが、3 つ目のアイテムを配置するのに十分なスペースがあります。
パディングを削除しましたが、この問題の原因となる余分なマージンはありません。
どうすればこれを修正できますか?
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;
}