margin-right不起作用？

Question

想把盒子模型里的四张图片从竖向变成田字格型的，但是不起作用
.pics {
border: solid 1px black;
margin-top: 60px;

}

.pics .item {
display: inline-block;
width: 540px;
height: 555px;
background: #9ACD32;
margin-bottom: 22px;
}

.pics .item:nth-child(2n+1){
margin-right: 22px;
}

.pics .item>img {
width: 100%;
}

.pics .item>.item_info {
width: 90%;
margin: auto;
margin-top: 40px;
color: #FFFFFF;
}

.pics .item>.item_info>h3 {
font-size: 24px;
line-height: 48px;
}

.pics .item>.item_info>a {
display: block;
width: 140px;
height: 38px;
text-align: center;
line-height: 38px;
background: #000;
margin-top: 20px;
}

Answer 1

你可以试试将.pics的width限制下为1100px,然后把.pics .item:nth-child(2n+1){ margin-right: 22px;
}这个去掉，我用的html是这样

<div class="pics">
    <div class="item">
        <img src=""/>
    </div>
    <div class="item">
        <img src="../pictues/bu.png"/>
    </div>
    <div class="item">
        <img src="../pictues/bu.png"/>
    </div>
    <div class="item">
        <img src="../pictues/bu.png"/>
    </div>
</div>