im trying to make the divs that have the h1 elements as shown in the picture provided below to move away from each other and not be this close to each other but i cant seem to do so i dont know if adding a width to each does anything. i tried adding margin and padding aswell but it moves the whole page instead of each div indivdually

here is the main section in the html file

<main>
    <div >
        <h1>Who We Are</h1>
    </div>
    <div >
        <h1>What We Do</h1>
    </div>

    <div >
        <h1>Where We Work</h1>
    </div>
    
</main>

and here is the css file

*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Calibri';
    color: #222;
    padding-bottom: 50px;
}

header{
    height:100px;
    display:flex;
    justify-content: space-around;
    align-items: center;
}

ul{
    display:flex;
    list-style-type:none;
    align-items: center;
    justify-content: center;
}

ul li a{
    color: rgb(0,0,0);
    text-decoration: none;
    padding:7px 15px;
    transition: all 0.3s ease-in-out;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    display:inline-block;
}

li a::after{
    content:'';
    display:block;
    height:4px;
    width:0;
    background: #FCAE1E;
}

li a:hover::after{
width:100%;
}

main{
    display: flex;
    height:calc(100vh - 100px);
    align-items: center;
    justify-content: center;
}


.who{
    width: 30%;
}
.what{
    width: 30%;
}
.where{
    width: 30%;
}

here is the image

CodePudding user response：

You should try justify-content: space-between

https://css-tricks.com/almanac/properties/j/justify-content/#:~:text=The justify-content property is,have reached their maximum size

Follow the link above for more info

CodePudding user response：

/* Just add this in your CSS file */

h1{ margin:30px 0px 30px 0px}