How to align multiple divs within a div ,horizontally with equal space-between-CodePudding

I know there are so many questions on this topic but I can seem to find a way to sort it out.. Im new to css and I am trying to re-create the simple box within a box method..

Heres the link to my Codepen

And here is the .html to give further context..

<html>

<head>
    <link rel="stylesheet" href="index.css">
    </script>
</head>

<body >
<!-- Navbar -->
        <nav >
            <h1>Hello World</h1>
        </nav>
<!-- Header Boxes -->
        <div >
            <div >
                <div >
                    <div >
                    </div>
                </div>
            </div>
        </div>
</body>
</html>

Basically, class = 'header-box' needs to house child-box-1,child-box-2,child-box-3, so there would essentially be a red, yellow and black box within the main blue box..

CodePudding user response：

    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat&display=swap');
    
    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .body {
        padding: 0;
        margin: 0;
        background-color:rgb(57, 67, 77);
    }
    
    .navbar {
        padding: 20;
        margin: 0;
        max-width: 100%;
        background-color:rgb(57, 67, 77);
        display: flex;
        justify-content: center;
    }
    
    h1 {
        padding-top: 10;
        margin: 0;
        font-family:'Montserrat';
        color: whitesmoke;
        font-size: xx-large;
    }
    
    .header-box {
        padding:0;
        margin: 10;
        max-width: 100%;
        height:200px;
        background-color: blue;
        display: flex;
        text-align: center;
    }
    
    .child-box-1 {
        padding: 0;
        margin: 10;
        background: red;
        width: 32%;
        height: 40px;
        margin: 1%;
    }
    
    .child-box-2 {
        padding: 0;
        margin: 10;
        background: yellow;
        width: 32%;
        height: 40px;
        margin: 1%;
    }
    
    .child-box-3 {
        padding: 0;
        margin: 10;
        background: black;
        width: 32%;
        height: 40px;
        margin: 1%;
      
    }

    <html>
    
    <head>
        <link rel="stylesheet" href="index.css">
        </script>
    </head>
    
    <body >
    <!-- Navbar -->
            <nav >
                <h1>Hello World</h1>
            </nav>
    <!-- Header Boxes -->
            <div >
                <div ></div>
              <div ></div>
              <div ></div>
            </div>
    </body>
    </html>