Как расположить контейнеры «не по центру» на рабочем столе, но плавно уменьшить «центрально» на мобильных устройствах ⇐ CSS

[Anonymous]

Я пытаюсь создать простую адаптивную страницу.

• На мобильных устройствах все нормально масштабируется, центрируется и соответствует ширине окна, это нормально. .
• На рабочем столе контейнер и содержимое масштабируются до максимальной ширины, но всегда располагаются по центру экрана по горизонтали.

Там, где это позволяет ширина браузера, я хочу, чтобы элементы div контейнера располагались на разных расстояниях от стороны области просмотра. например один %5 справа или ещё 8% слева? Для эстетики дизайна.
Я пробовал использовать Calc для ширины VH и медиа-запросы, но не могу заставить его работать без обрезки изображений при уменьшении масштаба браузера, или случаются большие «скачки» в размерах. есть идеи?

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

Basura







body {
background-color: whitesmoke;
margin: 20px;
padding: 0;
font-family: 'Times New Roman', Times, serif;
font-size: 16px;
line-height: 1.2;
}

/* Link styles */
a {
color: blue; /* Set link color to blue */
text-decoration: none; /* Remove default underline */
}

/* Hover and active link styles */
a:hover,
a:active,
a:focus {
text-decoration: underline; /* Underline link on hover, click, or focus */
}

.container {
background-color:;
margin-bottom: 80px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* Change flex direction to column */
position: relative; /* Add position relative */
margin-top: 0px; /* Add margin-top for spacing */
}

/* Custom CSS for text boxes */
.textbox {
background-color: white;
max-width: 600px;
padding: 10px;
margin-top: 20px; /* Add margin-top for spacing */
margin-left: auto; /* Align to the right */
margin-bottom: 0px; /* Add margin-bottom for spacing */
text-align: left; /* Align text to the left */
}









[img]https://source.unsplash.com/random?car[/img]


Lorem ipsum





[img]https://source.unsplash.com/random?cat[/img]


Lorem ipsum

Подробнее здесь: https://stackoverflow.com/questions/783 ... moothly-sc