Как избежать того, чтобы CSS Bootstrap резервировал нежелательное пространство внутри контейнера в правом конце? ⇐ CSS

[Anonymous]

Я использую Bootstrap 5 в своем проекте для верстки. Содержимое не занимает все пространство внутри родительского контейнера, и слева имеется несколько смещений, иногда перекрывающихся элементов, из-за чего макет не соответствует логике контейнера-строки-столбца.
Ссылка на файл начальной загрузки

Код: Выделить всё

[*]

У меня есть две проблемы.

• Существуют отрицательные поля в 12 пикселей, в основном содержимое перемещается влево. Я использую m-0, чтобы компенсировать эту проблему на отдельных элементах div, где форматирование отключено.
• Как показано на изображении, пространство показано перекрестными пунктирными линиями, что независимо от того, что я попытка сделать не исчезает.

Справочное изображение



Html-код

Код: Выделить всё

Checkout Products


Chino

1
M
1999







Polo

1
L
1299

Код CSS-файла:

Код: Выделить всё

.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:

Код: Выделить всё

: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;
}

Попробовал установить ширину на 100 %, отступы и поля на 0, чтобы содержимое всегда находилось внутри родительского контейнера и занимало всю ширину контейнера, в случае переполнения перемещается последний блок столбцов. ниже текущей строки.

Подробнее здесь: https://stackoverflow.com/questions/793 ... o-the-righ