Why is the <div> with position-absolute and start-100 positioned outside the container?

.element
{
    background-color: black;
    margin-left: 30rem;
    margin-right: 30rem;
    margin-top: 13rem;
    height: 200px;
}

.element
{
    background-color: black;
    margin-left: 30rem;
    margin-right: 30rem;
    margin-top: 13rem;
    height: 200px;
}

        <div class="element" style="position:relative;">
            <div class="" style="postion:absloute; left:100%;">
                <p class="text-danger fs-4">Text</p>
            </div>
           
        </div>

        <div class="element" style="position:relative;">
            <div class="" style="postion:absloute; left:100%;">
                <p class="text-danger fs-4">Text</p>
            </div>
           
        </div>