Добавление конкретного запаса статей в разделе

Question

Я пытаюсь создать раздел с 6 статей в нем, которые занимают всю ширину секции и имеют 1.2em пространства между изображениями:

В изображение, которое я добавил, я показываю два изображения. Первая - это текущая ситуация, а вторая - то, что я хочу. Это код CSS, который я использую в данный момент:

section { 
margin: 0 10%; 
display: flex; 
flex-wrap: wrap; 
background: pink; 
margin-bottom: 50em;} 

section article { 
box-shadow: 0em 0.2em 0.2em rgba(0,0,0, 0.3); 
width: 33.3%;} 

section article img { 
width: 100%; 
height: 100%;} 

Я надеюсь, что кто-то здесь знает, как исправить мою проблему.

Благодаря

Answer 1

Попробуйте

section { 
 
    margin: 0 10%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background: pink; 
 
    margin-bottom: 50em; 
 
} 
 

 
section article { 
 
    box-shadow: 0em 0.2em 0.2em rgba(0, 0, 0, 0.3); 
 
    width: calc(33.3% - 1.2em); 
 
    margin: 0.6em; 
 
    position: relative; 
 
    float: left; 
 
    display: block; 
 
    overflow: hidden; 
 
} 
 
section article img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<section> 
 
    <article><img src="http://placehold.it/50x50" /></article> 
 
    <article><img src="http://placehold.it/50x50" /></article> 
 
    <article><img src="http://placehold.it/50x50" /></article> 
 
    <article><img src="http://placehold.it/50x50" /></article> 
 
    <article><img src="http://placehold.it/50x50" /></article> 
 
    <article><img src="http://placehold.it/50x50" /></article> 
 
</section>

Answer 2

Пожалуйста, проверьте следующее:

section article { 
box-shadow: 0em 0.2em 0.2em rgba(0,0,0, 0.3); 
width: 30%; 
box-sizing:border-box; 
margin: 3%; 
} 

Answer 3

section { 
 
margin: 0; 
 
display: flex; 
 
flex-wrap: wrap; 
 
background: pink; 
 
margin-bottom: 50em; 
 
justify-content: space-between; 
 
} 
 

 
section article { 
 
box-shadow: 0em 0.2em 0.2em rgba(0,0,0, 0.3); 
 
width: 32%; 
 
    margin: 0 0 2%; 
 
} 
 

 
section article img { 
 
width: 100%; 
 
height: 100%;}

<section> 
 
    
 
    <article><img src="http://lorempixel.com/900/300/nightlife/"></article> 
 
    <article><img src="http://lorempixel.com/900/300/nightlife/"></article> 
 
    <article><img src="http://lorempixel.com/900/300/nightlife/"></article> 
 
    
 
    <article><img src="http://lorempixel.com/900/300/nightlife/"></article> 
 
    <article><img src="http://lorempixel.com/900/300/nightlife/"></article> 
 
    <article><img src="http://lorempixel.com/900/300/nightlife/"></article> 
 
    
 
</section>