保证金的CSS问题很奇怪

Question

我有一个奇怪的问题，这个部分我造型..实际上，我有一个906px宽的容器元素，然后内部四个跨度应该并排排列并均匀分布..什么正在发生的是最后一个元素流向新行。我尝试过使用last-child和last-of-type的变种来解决这个问题，但我所做的一切都没有用。我甚至使用硬编码“最后”类，右边距仍然适用于这段代码。有任何想法吗？请参阅下面的图片了解正在发生的事情。

HTML

<div id="internship-carousel" class="group">
    <div id="internship-carousel-container">
        <span class="internship-section">
            <h4>Amnesty International</h4>
            <img src="img/intern_logo/amnesty.png" class="intern_logo" alt="Amnesty International">
        </span>
        <span class="internship-section">
            <h4>State of Georgia</h4>
            <img src="img/intern_logo/georgia.png" class="intern_logo" alt="Amnesty International">
        </span> 
        <span class="internship-section">
            <h4>Department of State</h4>
            <img src="img/intern_logo/statedepartment.png" class="intern_logo" alt="Amnesty International">
        </span> 
        <span class="internship-section internship-section-last">
            <h4>CARE</h4>
            <img src="img/intern_logo/care.png" class="intern_logo" alt="Amnesty International">
        </span>
    </div>
</div>

CSS

#internship-carousel{margin-top:50px;}
.internship-section{
    background-color:#dfdfdf;
    text-align:center;
    padding:0px;
    width: 190px;
    height:225px;
    margin-right:44px;
    display:block;
    float:left;
}
.internship-section h4{
    padding-top:15px;}
}
span.internship-section-last
{
    margin:0;
}
.group:before,
.group:after {
    content:"";
    display:table; }
.group:after { clear:both; }

Answer 1

尝试将此添加到您的css并删除最后一个类

.internship-section:nth-child(4){
    margin-right:0px
}

Answer 2

你的代码上有一个拼写错误：

.internship-section h4{
    padding-top:15px;}
}

在}声明后删除padding-top，你应该是金色的。 （demo）

顺便说一下，该演示使用了:last-child选择器。