The width of each of the four div, is fixed, how to make each div interval equal?

buttons such as "unchecked, completed" are div elements. Now that the width of div is fixed, how to achieve fixed left and right position of buttons on both sides, equal distribution of middle two buttons, equal gap between buttons, adaptive screen resolution

Mar.26,2022

justify-content: space-between;
is fine.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
-sharpmain {
    height: 150px;
    border: 1px solid -sharpc3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
}

-sharpmain div {
    width: 70px;
    height: 70px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
</div>
Menu