Интервал внутри изображения в сетке

Question

Прошу прощения, я уверен, что решение этого должно быть на этом сайте где-то, но я не знаю, какие слова искать для его поиска.

Я пытаюсь создать сетку изображений (2 широкий x неограниченный вниз), используя левый поплавок с пробелом между левым и правым изображением на странице. Я знаком с первой дочерней командой, и я попытался использовать ее здесь, но это работает только при удалении левого поля на первом изображении, а не во всех изображениях с левой стороны.

Как я могу объединить неограниченное количество (список заканчивается, это просто разные для каждой страницы) количество изображений без пробелов на внешних краях, но пространство внутри?

Мой CSS:

section{ 
width: 940px; 
min-height: 400px; 
margin: 0 auto; 
padding: 10px 0 0 0;  
} 

.package{ 
width: 450px; 
height: 180px; 
background-color: #f1f6fb; 
float: left; 
margin: 20px 0 20px 40px; 
} 

.package-image{ 
margin: 20px; 
float: left; 
} 

.package-description{ 
width: 255px; 
height: 160px; 
float: left; 
margin-top: -10px; 
} 

.favourite{ 
position:relative; 
top: 30px; 
left: -150px; 
} 

.first { 
margin-left: 0; 
} 

Мой HTML:

<section> 
<div class="package first"> 
<img class="package-image" src="./images/aeyracakes_sakuraminicakes-_1_medium.jpg"> 
<img class="favourite" src="./images/favourite-no.png"> 
<div class="package-description"> 
<h4>package name</h4> 
<h5><a href="#">company name</a></h5> 
<p>package description</p> 
</div> 
</div> 

<div class="package"> 
<img class="package-image" src="./images/aeyracakes_sakuraminicakes-_1_medium.jpg"> 
<img class="favourite" src="./images/favourite-no.png"> 
<div class="package-description"> 
<h4>package name</h4> 
<h5><a href="#">company name</a></h5> 
<p>package description</p> 
</div> 
</div> 

<div class="package"> 
<img class="package-image" src="./images/aeyracakes_sakuraminicakes-_1_medium.jpg"> 
<img class="favourite" src="./images/favourite-no.png"> 
<div class="package-description"> 
<h4>package name</h4> 
<h5><a href="#">company name</a></h5> 
<p>package description</p> 
</div> 
</div> 
<div class="clearfix"></div> 
</section> 

Спасибо!

Answer 1

Использование: nth-child (even | odd) на ваших пакетах, чтобы выбрать ваше изображение влево или вправо.

.package:nth-child(odd){ 
    margin-left: 0; 
} 
.package:nth-child(even){ 
    margin-right: 0; 
}