How to I make div not clip out of viewport width

Question

I working on a project and I have a button which opens a div under it. Unfortunately this button is at the very right of the screen and when the div opens it extends the screen to the right.enter image description here

As you can see the div goes further than the bar at the top, which it shouldn't. What I want is the div's right side to be as far away from the right side as the hotbar.

Here is the code:

#profile-popup {
    margin-top: -15px;
    left: 0%;
    transform: translate(-40%);
    width: 250px;
    display: none;
}

.arrow {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 10; 
    height: 10; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.profile-container-arrow-border {
    margin-top: -9.3px;
    border-bottom: 10px solid #464646;
}
.profile-container-arrow {
    margin-top: -9px;
    border-bottom: 10px solid #111;
}

.profile-container {
    background-color: #111;
    border: 0.5px solid #464646;
    padding: 7px;
    margin-top: 10px;
    border-radius: 5px;
    color: #fff;
}
.profile-preview {
    margin-left: 45px;
    width: calc(100% - 45px);
}

<div style="position: absolute; z-index: 1; width: 100%;">
                            <div id="profile-popup">
                                <div class="profile-container-arrow-border arrow"></div>
                                <div class="profile-container-arrow arrow"></div>
                                <div class="profile-container" style="margin-top: 200px;">
                                    <span style="font-size: 20px; font-weight: bold;"> Profile </span>
                                    <div style="margin-top: 5px;">
                                        <div style="float: left;">
                                            <img src="http://localhost:3000/assets/profile.png" height="40px" />
                                        </div>
                                        <div class="profile-preview">
                                            <div> <a style="text-decoration: underline; cursor: default;"> username </a> </div>
                                            <span style="margin-top: 5px; font-size: 12px;"> I don't know what to put here ... yet </span>
                                            <div style="width: 100%; height: 1rem; font-size: 12px;">
                                                <a style="float: right; color: rgb(103, 161, 241); text-decoration: underline; cursor: pointer;"> more... </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>