How to get the boxes to have evenly space between them?-CodePudding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lost and Found</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
</head>

<body>
    <div  >
        <img src="img.png" alt="logo" srcset="">
        <div ><span>Electronics</span></div>
        <div ><span>Plastics</span></div>
        <div ><span>Wearables</span></div>
        <div ><span>Others</span></div>
        <input id="srch" type="search" value="Search">
    </div>

    <div >
    <div>
        <h1 style="font-size: 60px;">Electronics</h1>
        <h1 style="font-size: 60px; font-family:cursive; text-decoration: underline;">-Electronics</h1>

        <div >
            <p>Help The Needy</p>
        </div>
        <div >
            <p>Help The Needy</p>
        </div>
        <div >
            <p>Help The Needy</p>
        </div>
        <div >
            <p>Help The Needy</p>
        </div>
        <div >
            <p>Help The Needy</p>
        </div>
        <div >
            <p>Help The Needy</p>
        </div>
    </div>
    </div>


    </div>
        
</body>
</html>

*{
    margin: 0px;
    padding: 0px;

}

.nav{
    background-color:bisque;
    width: 100%;
    height: 60px;
    display: flex; 
    align-items: center;
    position:fixed;
}

.b{
    height: 60px;
    width: 10%;
    background-color: antiquewhite;
    margin: 2px;
    justify-content: center;
    font-family: 'Anton', sans-serif;
    border-radius: 20px;
    align-items: center;
    display: flex;
}
img{
    width: 80px;
    height: 60px;
}

#srch{
width: 10%;
height:60px;
right: 0%;
position:fixed;
font-size: larger;
}

.main{
   height: 1700px;
   width: 100%;
   border-color: blue;
   border-style: double;
    background-color:lightgoldenrodyellow;
}

.head{
    display: inline-block;
    margin-top: 60px;
    margin-left: 0px;
    margin-right: 0px;
    box-sizing: border-box;
    width: 30%;
    height: 250px;
    border-color:red;
    border-style: groove;
    border-width: 5;
    font-family: cursive;
    font-size: larger;
}

.head is the class of the boxes while . main is the div in which all boxes are placed. rest of the code shouldnt be relevant for this problem. How to get the boxes to have evenly space between them ? I need to have 3 boxes in a line. i am beginner trying to learn css, html and java script. Please help

CodePudding user response：

.head-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.head{
    display: inline-block;
    margin-top: 60px;
    margin-left: 0px;
    margin-right: 0px;
    box-sizing: border-box;
    flex:0 1 30%;
    height: 250px;
    border-color:red;
    border-style: groove;
    border-width: 5;
    font-family: cursive;
    font-size: larger;
}

    <div >
        <div >
            <p>Help The Needy</p>
        </div>
        <div >
            <p>Help The Needy</p>
        </div>
        <div >
            <p>Help The Needy</p>
        </div>
        <div >
            <p>Help The Needy</p>
        </div>
        <div >
            <p>Help The Needy</p>
        </div>
        <div >
            <p>Help The Needy</p>
        </div>
      </div>