我怎样才能使 3 个 div 彼此远离

Question

我试图使具有如下图所示的 h1 元素的 div 彼此远离而不是彼此靠近但我似乎不能这样做我不知道是否为每个添加宽度有什么作用.我也尝试添加边距和填充，但它会移动整个页面而不是单独移动每个 div

这是 html 文件中的主要部分

<main>
    <div class="who">
        <h1>Who We Are</h1>
    </div>
    <div class="what">
        <h1>What We Do</h1>
    </div>

    <div class="where">
        <h1>Where We Work</h1>
    </div>
    
</main>

这是 css 文件

*{
    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

Answer 1

你应该试试 justify-content: space-between

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

点击上面的链接了解更多信息

Answer 2

/* Just add this in your CSS file */

h1{ 保证金：30px 0px 30px 0px}