Why when there's no padding on the items the items fit in the container??

1- Why when I don't give padding to the items the items fit in the container?

It depends on what padding you will give the items. Let's say if you give them 130px padding, they won't fit into the container because total width of the items exceeds the width of the container. They will stretch in 1 row outside of the container. To fix that you also need to set up a flex-wrap property on a container itself. By default it's nowrap. It means that elements inside the container stay in one row and don't wrap to the next row. If you set up flex-wrap: wrap; on a container, then no matter how big padding you'll give to the items they will stay inside the container go down to the second row within the container.

/* ================================= Flexbox ==================================== */

{ box-sizing: border-box;

}

body {

font-size: 1.35em;

font-family: 'Varela Round', sans-serif;

color: #fff;

background: #e8e9e9;

padding-left: 5%;

padding-right: 5%;

}

.container {

padding: 10px;

background: #fff;

border-radius: 5px;

margin: 45px auto;

box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);

display: flex;

justify-content: space-around; flex-wrap: wrap;

}

.item {

color: #fff;

padding: 135px;

margin: 5px;

background: #3db5da;

border-radius: 3px;

/width: 200px;/

}

2- When I give the items width the items fit perfectly in the container? Almost the same as the first point. Depends on what width you give the items and how flex-wrap property is set up on a container.