CSS Calc Function

Understanding The CSS Calc() Function

HTML

<div id = "parentdiv">
    <div class = "childdiv" style = "width: 40px;"></div>
    <div class = "childdiv" style = "width: 10px;"></div>
    <div class = "childdiv" style = "width: 35px;"></div>
    <div class = "childdiv" style = "width: 20px;"></div>
</div>

CSS

#parentdiv {
    width: 100%;
    height: 60px;
    background-color: #4679bd;
}
.childdiv {
    display: inline-block;
    height: 30px;
    border-radius: 15px;
    background-color: white;
    float: left;
    margin-top: 15px;
    margin-left: calc(10% - 21px);
}