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

<!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 class="nav" >
        <img src="img.png" alt="logo" srcset="">
        <div class="b"><span>Electronics</span></div>
        <div class="b"><span>Plastics</span></div>
        <div class="b"><span>Wearables</span></div>
        <div class="b"><span>Others</span></div>
        <input id="srch" type="search" value="Search">
    </div>

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

        <div class="head">
            <p>Help The Needy</p>
        </div>
        <div class="head">
            <p>Help The Needy</p>
        </div>
        <div class="head">
            <p>Help The Needy</p>
        </div>
        <div class="head">
            <p>Help The Needy</p>
        </div>
        <div class="head">
            <p>Help The Needy</p>
        </div>
        <div class="head">
            <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