Padding in a section

[santiagomarin0716]

How can I have more space between the items and keep them responsive?

.section1 {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
margin-top: 10%;
width: 100%;
padding-top: 5%;
height: 100%;

}
.section-title {
text-align: center; /* Center horizontally /
font-size: 35px; / Adjust the size of the title */
background-color: #fff;
}

.benefits-section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
max-width: 1170px;
background-color: #fff;
margin-top: 5%;
}

.benefit {
flex-basis: calc(30% - 20px);
text-align: center;
background-color: white;
margin-bottom: 20px; /* Add margin to the bottom of each item /
padding-right: 20px; / Add padding to each item */

}

.benefit img {
max-width: 100%;
height: auto;
max-height: 150px;
object-fit: cover;
background-color: white;
padding-bottom: 20px;
}

.benefit h3 {
font-size: 20px;
margin-bottom: 10px;
background-color: white;
}

.benefit p {
font-size: 16px;
margin: 0;
background-color: white;
}

[Guided]

You can use three backticks before and after a code block to display code.
If you cant find a backtick on your keyboard use ALT + 096 on the keypad to display one.

I’m not sure which items you want to space out. Or which elements have classes attached to them.

However there are a few ways you can space out flex items.

• You can use margins to add a little space, or margin auto to add responsive space.
• The gap property works in Grid and Flexbox, if you want more space between multiple items.
• The justify content property has several values, space-around will add space on either side of “each item”, this can cause items to have less space on the edge of the container, space-evenly will distribute space between each item and the edge of the container

There are other ways, these are just a few I tend to use the most