Child div is not maintaining the padding of parent div

here is my html

<div class="box">
        <nav class="tabset--nav">
            <div class="nav--item -is--active" data-tab-target="tab-1">
                Onesies
            </div>
            
            <div class="nav--item" data-tab-target="tab-2">
                Twosies
            </div>
            
            <div class="nav--item" data-tab-target="tab-3">
                Threesies
            </div>
            
            <div class="active--tab__marker"></div>
        </nav>
    
        <section class="tabset--content" data-active-tab="tab-1">
            <div class="tabset--section">
                TABSET ONE
            </div>
            <div class="tabset--section">
                TABSET TWO
            </div>
            <div class="tabset--section">
                TABSET THREE
            </div>
        </section>

</div>

this is the container

.box {
    width: 600px;
    height: 400px;
    overflow: hidden;
    
    display: flex;
    flex-flow: column wrap;
    
    box-shadow: 0px 0px 14px 4px rgba(#000,0.1);
    
    padding: 3rem;
}

and here is the children.

.tabset--content {
    position: relative;
    width: 300%;

    flex-grow: 1;
    
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    
    transition: 0.3s;

}

codepen:

https://codepen.io/AshiqCSEWorld/pen/oNdwMJg

what I want is to tabset--content should maintain the padding of its parent container. how can I do that?