I'm currently going through some educational material on Codeacademy, and I'm curious about how I can control the spacing between the "locations" text and the three divs below it. The task requires me to create a 15px gap between them, but I am unsure of how to achieve that. Right now, there is just a default spacing that I cannot figure out how it is being calculated.
html {
text-align: center;
}
.location-container {
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg);
height: 700px;
width: 1200px;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
#local {
background-color: blueviolet;
}
.location-columns {
display: flex;
justify-content: center;
width: 100%;
gap: 30px;
color: white;
}
.locations {
background-color: black;
width: 300px;
}<div class="location-container">
<h2 id="local">Locations</h2>
<div class="location-columns">
<div class="locations">
<h3>Downtown</h3>
<h5>384 West 4th St</h5>
<h5> Suite 108</h5>
<h5>Portland, Maine</h5>
</div>
<div class="locations">
<h3>East Bayside</h3>
<h5>3433 Phisermans Avenue</h5>
<h5>(Northwest Corner)</h5>
<h5>Portland, Maine</h5>
</div>
<div class="locations">
<h3>Oakdale</h3>
<h5>515 Crescent Avenue</h5>
<h5> Second Floor</h5>
<h5>Portland, Maine</h5>
</div>
</div>If you have any insights or suggestions, they would be greatly appreciated.