Woher kam diese Marge?

Question

Ich habe ein Popup, das auf einer Webseite erscheint. (Es ist im Grunde ein Modal)

Wenn es angezeigt wird, erstellt es den Speicherplatz, wo eine Bildlaufleiste sein könnte, aber es gibt keine Bildlaufleiste vorhanden. Einer soll auf dem Popup erscheinen (blauer Hintergrund). Es scheint fast so, als ob die Bildlaufleiste, die auf dem Popup erscheint, nur sichtbar auf dem Popup erscheint, aber soweit das Dokument betroffen ist, ist es immer noch auf der rechten Seite der Seite.

Wie kann ich erreichen, was der Screenshot unten zeigt, aber ohne das Leerzeichen auf der rechten Seite, das imitiert, wo eine Bildlaufleiste positioniert wäre? Unten finden Sie die CSS, HTML und Screenshots des Popups.

CSS:

html { 
    overflow-y: scroll; 
    position: relative; 
} 

.popup{ 
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 5%; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
} 

.popup .popup_content{ 
    background-color: rgba(0,0,50,.75); 
    margin: auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
    height: 90%; 
    border-radius: 15px; 
    overflow-y: scroll; 
} 

HTML:

<div class='popup'> 
    <div class='popup_content'> 
    <!--Some profound text goes in the popup--> 
    </div> 
</div> 

GELÖST ich das Problem mit einigen zusätzlichen Graben gelöst haben. Es scheint Bootstrap, wie immer, fügt funky Dinge hinzu. Ich musste sie übersteuern. Siehe Antwort unten.

Edit: Ich habe den Titel geändert, um besser die eigentliche Frage für künftige Nutzer widerspiegeln. Das Problem wurde durch einen -15px Rand verursacht, der durch Bootstrap angewendet wurde.

Answer 1

Sieht aus wie ich das Problem gefunden habe. Auf dieser Webseite verwenden wir Bootstrap für ein bestimmtes Styling. Auf einer <div> über dem Popup-Div, verwenden wir eine Bootstrap "row" -Klasse. Dies scheint ein -15px margin-left und margin-right angewendet zu haben. Dies hat das Problem verursacht. Ich habe es korrigiert, indem ich den Bootstrap css überschrieb, indem ich margin: 0; in meinem css einsetzte. Zum Beispiel:

.popup{ 
    margin: 0; //Here is what I added :) 
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 5%; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}