css margin dosent fits correctly

Question

so o want to add space between these inline-block divs but when i add margin left, it margins from the left side of browser to:

* {
            box-sizing: border-box;
        }
        .box {
            width: 50px;
            height: 50px;
            background-color: yellow;
            border: 2px solid red;
            border-radius: 50%;
            **margin-left: 10px;**
        }
        .left , .right, .row {
            display: inline-flex;
        }
        @media screen and (max-width: 350px) {
            .left , .right, .row {
                display: block;
        }
            .box {
                width: 100%;
                margin-left: 0;
                border-radius: 5px;
            }
        }

like so: