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

[Anonymous]

У меня есть раздел, который выходит за пределы страницы с обеих сторон, и мне нужно уменьшить ширину столбца, содержащего текст, для небольших экранов. Я уменьшил его до 70%, и он отлично работает с правой половиной, но выравнивает левую и левую стороны, из-за чего он выпадает за пределы экрана. Я попробовал ряд модификаций, но не смог правильно выровнять столбец уменьшенной ширины. Любая помощь приветствуется!

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

@import url("https://use.typekit.net/poz1xqv.css");
@import url('https://fonts.googleapis.com/css2?family=Syne:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap')
*
{
margin:0px;
padding:0px;
}
.body {
display: flex;
justify-content: center;
}
.syne-font {
font-family: "Syne", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}
.work-sans-light {
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}
.work-sans-medium {
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.cta-button {
position: relative;
display: block;
background-color: #ffffff;
width: 100%;
text-align: center;
padding: 10px 0;
/*border: 2px solid black;*/
text-decoration: none;
color: black;
transition: background-color 0.3s, color 0.3s;
font-size: 20px;
}
.cta-button:hover {
text-decoration: none;
/*background-color: black;
color: white;*/
}
.cta-button::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
border-top: 2px solid black;
border-left: 2px solid black;
transition: ease .5s;
}
.cta-button::after{
content: "";
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
right: 0;
border-right: 2px solid black;
border-bottom: 2px solid black;
transition: ease .5s;
}
.cta-button:hover::before {
content: "";
position: absolute;
width: 100%;
height: 0;
top: 0;
left: 0;
border-top: 2px solid black;
border-left: 2px solid black;
transition: ease .5s;
}
.cta-button:hover::after{
content: "";
position: absolute;
width: 100%;
height: 0px;
bottom: 0;
right: 0;
border-right: 2px solid black;
border-bottom: 2px solid black;
transition: ease .5s;
}
.more-button {
position: relative;
display: block;
background-color: #ffffff;
width: 60%;
text-align: center;
padding: 10px 0;
/*border: 2px solid black;*/
text-decoration: none;
color: black;
/*opacity: .5;*/
transition: opacity 1s, background-color 0.3s, color 0.3s;
font-size: 14px;
}
.more-button:hover {
text-decoration: none;
/*background-color: black;
color: white;*/
}
.more-button::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
border-top: 2px solid black;
border-left: 2px solid black;
transition: ease .5s;
}
.more-button::after{
content: "";
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
right: 0;
border-right: 2px solid black;
border-bottom: 2px solid black;
transition: ease .5s;
}
.more-button:hover::before {
content: "";
position: absolute;
width: 100%;
height: 0;
top: 0;
left: 0;
border-top: 2px solid black;
border-left: 2px solid black;
transition: ease .5s;
}
.more-button:hover::after{
content: "";
position: absolute;
width: 100%;
height: 0px;
bottom: 0;
right: 0;
border-right: 2px solid black;
border-bottom: 2px solid black;
transition: ease .5s;
}
.hidden-text {
display: flex;
flex-direction: column;
position: relative;
opacity: 0;
overflow: hidden;
transition: 1s ease;
}
.hidden-text:hover {
opacity:  100;
}
.feature-image:hover ~ .hidden-text,
.hidden-text:hover {
opacity: 100;
}
.sliding-section {
/* margin-left: -120px;
margin-right: 120px;  */
min-height: 800px;
position: relative;
margin-left: -25%;
margin-right: 25%;
/*width: 120%;*/
width: 150%;
display: flex;
align-items: center;
overflow: hidden;
transform: translateX(0);
transition: ease 1s;
}
@media screen and (min-width: 640px) {
.sliding-section {
width: 120%;
margin-left: -10%;
margin-right: 10%;
}
}
.residential {
position: relative;
min-height: 600px;
transform: translateX(0);
opacity: 1;
transition: ease 1s;
}
.residential:hover {
transform: translateX(10%);
transition: ease 1s;
}
.residential:hover ~ .commercial{
transform: translateX(10%);
opacity: .25;
transition: ease 1s;
}
.hidden-button {
opacity: 0;
transition: ease 1s;
}
.residential:hover .hidden-button{
opacity: 1;
transition: ease 1s;
}
.commercial:hover .hidden-button{
opacity: 1;
transition: ease 1s;
}
.commercial {
position: relative;
min-height: 600px;
transform: translateX(0);
opacity: 1;
transition: ease 1s;
}
.commercial:hover {
transform: translateX(-10%);
transition: ease 1s;
}
.commercial:hover ~ .residential{
transform: translateX(-10%);
transition: ease 1s;
}
.residential:has(~.commercial:hover) {
transform: translateX(-10%);
opacity: .25;
transition: ease 1s;
}
.hid-text-res {
display: flex;
flex-direction: column;
position: relative;
opacity: 100;
overflow: hidden;
transition: 1s ease;
}
.hid-text-com {
opacity: 100;
transition: 1s ease;
}
.hid-text-com:has(~.residential:hover) {
opacity: 0;
transition: ease 1s;
}

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

tailwind.config = {
theme: {
extend: {
fontFamily: {
'TradeGothicNext': ['"Trade Gothic Next"', 'sans-serif']
},
fontFamily: {
'Syne': ['"Syne"', 'sans-serif']
},
fontFamily: {
'Work Sans': ['"Work Sans"', 'sans-serif']
},
colors: {
greybg: '#CECCC4',
}
transitionDuration: {
'300':  '300ms',
}
}
}
}





[img]https://danverstg.wpengine.com/wp-content/uploads/2024/04/img4.jpg[/img]
Multi-Family

[url=#]learn more[/url]

See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs




[img]https://danverstg.wpengine.com/wp-content/uploads/2024/04/img5.jpg[/img]
Hospitality


See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs
[url=#]learn more[/url]

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