Wie vermeide ich, dass CSS Bootstrap unerwünschten Platz im Container am rechten Ende reserviert? ⇐ HTML

[Guest]

Ich verwende Bootstrap 5 in meinem Projekt für das Layout. Der Inhalt nimmt nicht den gesamten Platz im übergeordneten Container ein und es gibt mehrere Versätze nach links, manchmal überlappende Elemente, was dazu führt, dass das Layout nicht mit der Container-Zeilen-Spalten-Logik übereinstimmt.
Link zur Bootstrap-Datei

Code: Select all

[*]

Ich habe zwei Probleme damit.

• Es gibt negative 12-Pixel-Ränder, die den Inhalt meist nach links verschieben. Ich verwende m-0, um dieses Problem bei einzelnen div-Elementen auszugleichen, wo auch immer das Format abweicht.
• Wie im Bild gezeigt, ist in gekreuzten Linien Leerzeichen vorhanden, egal was ich tue Versuche es zu tun, verschwinden nicht.

Referenzbild



Html-Code

Code: Select all

Checkout Products


Chino

1
M
1999







Polo

1
L
1299

CSS-Infile-Code:

Code: Select all

.address-item {
border: 4px solid black;
}

.address-title {
font-weight: bold;
}

.selected-addr {
background-color: aquamarine;
}

#checkout-items {
padding: 0;
padding-left: 24px;
margin: 0;
}

#payment-container {
width: 106%;
margin: 0;
padding: 0;
}

CSS-Code für externe Dateien:

Code: Select all

:root {
--primary-color: #FFFFFF;
--secondary-color: #000000;
--teritiary-color: #3a3a3a;
--background-color: white;
--font-color: #3a3a3a;
--base-distance: 10px;
--double-distance: 20px;
--selected-color-dim: 45px;
}

#header {
padding: 10px;
}

#footer {
background-color: var(--teritiary-color);
color: var(--primary-color);
padding: var(--double-distance);
margin-top: var(--base-distance);

}
#header-title-container{
height:auto;
padding-top:1rem;
padding-bottom:1rem;
}
.fixed-row {
position: fixed;
top: 0;
left: 0;
width: 100%;
/* Ensures it spans the full width of the viewport */
z-index: 1050;
/* Ensures it stays on top of other elements */
background-color: var(--background-color);
/* Optional: Set a background to avoid transparency */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* Optional: Add a shadow for better visibility */
}

body {
margin-top: 60px;
background-color: var(--background-color);
color: var(--font-color);
height: 100%;
}

.z-dark-btn {
background-color: var(--teritiary-color);
color: var(--background-color);
}

.z-light-btn {
border: 2px solid #3a3a3a;
}
.color-indicator {
width: 32px;
height: 32px;
}

#hamburger-menu-container,
#search-container {
display: none;
}

.social_media_handles {
color: #FFFFFF;
}

.container {
max-width: 1000px;
}

.color-border {
min-width: var(--selected-color-dim) !important;
min-height: var(--selected-color-dim) !important;
}
.colors-container{
min-height: var(--selected-color-dim) !important;
}

/* Start Generic */
.mt-1r{
margin-top: 1rem !important;
}
.w-100p{
width:100%;
}
/* End Generic */

/* Login Popup styling */
.popup-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}

.popup {
background: white;
padding: 20px;
border-radius: 8px;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}

.popup input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}

.popup button {
padding: 10px 20px;
background: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

.popup button:hover {
background: #0056b3;
}

.error {
color: red;
}

Es wurde versucht, die Breite auf 100 %, den Abstand und die Ränder auf 0 zu setzen, sodass sich der Inhalt immer in einem übergeordneten Container befindet und die gesamte Breite des Containers einnimmt. Im Falle eines Überlaufs wird der letzte Spaltenblock verschoben unterhalb der aktuellen Zeile.