Как сделать справа бэкграунд до конца?

Question

Не могу понять почему при left:-700px не появляется скролл, а при right:-700px появляется? Есть у меня общий div в котором max-width:1820px и есть пару дивов которые выходят за рамки этой ширины и должны идти до конца экрана, если слева нормально, то справа не получается? Как я могу это сделать не прибегая ко всяким oveflow:hidden и не делая разные div вне main-container ?

.main-container {
    max-width: 1920px;
    padding: 0 100px;
    margin: 0 auto;
}
.yellow-card {
    background: #dddc00;
    padding: 80px;
    border-radius: 60px;
    margin-top: 35px;
    background-image: url(http://site.ru/wp-content/themes/blankslate/img/yellow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: 60%;
    padding-top: 450px;
    position:relative;
}
.yellow-card:after {
    position: absolute;
    width: 800px;
    height: 100%;
    content: "";
    left: -750px;
    top: 0;
    background: #dddc00;
}
.merchform {
    border-radius: 60px;
    background-color: #8c1558;
    padding: 80px;
    margin-top: 100px;
    position: relative;
    display: flex;
}
.merchform:after {
    position: absolute;
    width: 800px;
    height: 100%;
    content: "";
    right: -750px;
    top: 0;
    background: #8c1558;
}

<div class="main-container">
<h2 class="section-title">Вся цепочка, от и до</h2>
<div class="yellow-card">
<p class="yellow-title">Очень удобно
и выгодно</p>
<p>Вам ничего не надо делать!</p>

<p>Вся работа полностью ведется под ключ от вашего запроса до упаковки партии в красивые пакеты или коробки.</p>

<p>На себя берем: поиск и закуп материала и фурнитуры, курирование всего процесса производства и печати нанесений. </p>

<p>Вам будут предложены различные варианты изделий с цветовым решением и подбором материала, где вы так же сможете выбирать, отталкиваясь от цены за изделие. </p>
</div>
<div class="merchform">
<div class="logo-merch">


</div>
<div class="formmerch">
<p class="white-title">Обращайтесь</p>
<p class="fyellow-title">Всегда рады помочь</p>
<div class="bottom-form">
<div class="left-text-f">
<p>Вы всегда можете рассчитывать
на профессиональную консультацию.</p>
<p>Поможем разобраться во всех 
тонкостях и нюансах.
</p>
</div>
<div class="botik-form">
<?php echo do_shortcode( '[contact-form-7 id="55de1c0" title="Контактная форма 1"]' ); ?>
</div>
</div>
</div>
</div>
</div>

Answer 1

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

.main-container {
    max-width: 1920px;
    padding: 0 100px;
    margin: 0 auto;
}
.yellow-card {
    background: #dddc00;
    padding: 80px;
    border-radius: 0 60px 60px 0;
    margin-top: 35px;
    background-image: url(http://site.ru/wp-content/themes/blankslate/img/yellow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: 60%;
    padding-top: 450px;
    position: relative;
    transform: translate(-108px, 0);
}

.merchform {
    border-radius: 60px 0 0 60px;
    background-color: #8c1558;
    padding: 80px;
    margin-top: 100px;
    position: relative;
    display: flex;
    transform: translate(108px, 0px);
}

<div class="main-container">
<h2 class="section-title">Вся цепочка, от и до</h2>
<div class="yellow-card">
<p class="yellow-title">Очень удобно
и выгодно</p>
<p>Вам ничего не надо делать!</p>

<p>Вся работа полностью ведется под ключ от вашего запроса до упаковки партии в красивые пакеты или коробки.</p>

<p>На себя берем: поиск и закуп материала и фурнитуры, курирование всего процесса производства и печати нанесений. </p>

<p>Вам будут предложены различные варианты изделий с цветовым решением и подбором материала, где вы так же сможете выбирать, отталкиваясь от цены за изделие. </p>
</div>
<div class="merchform">
<div class="logo-merch">


</div>
<div class="formmerch">
<p class="white-title">Обращайтесь</p>
<p class="fyellow-title">Всегда рады помочь</p>
<div class="bottom-form">
<div class="left-text-f">
<p>Вы всегда можете рассчитывать
на профессиональную консультацию.</p>
<p>Поможем разобраться во всех 
тонкостях и нюансах.
</p>
</div>
<div class="botik-form">
<?php echo do_shortcode( '[contact-form-7 id="55de1c0" title="Контактная форма 1"]' ); ?>
</div>
</div>
</div>
</div>
</div>

БЛОГ НА HUSL

Как сделать справа бэкграунд до конца?

Ответы (1 шт):