DONT ADD ANYTHING HERE!

  1. The alternative box model (example 2) has
    box-sizing: border-box;
  2. margin does not contribute to box size

Standard Box Model

hello

Alternate Box Model

hello

CSS

    .box-container {
        border: 2px solid lightgoldenrodyellow;
        height: 20vh;
        margin-top: 1vh;
    }

    .box {
        width: 50%;
        border: solid var(--primary-green);
        border-width: 10px 100px;
        height: 10vh;
        margin: auto;
        text-align: center;
    }

    .box2 {
        width: 50%;
        border: solid var(--primary-green);
        border-width: 10px 100px;
        margin: auto;
        text-align: center;
        box-sizing: border-box;

    }

HTML

    <div class="box-container">
        <div class="box">
            hello
        </div>
    </div>
    
    <div class="box-container">
        <div class="box2">
            hello
        </div>
    </div>

References