How can I create a block on my site where there are no container restrictions on the right, but they are limited on the left? The goal is to have an image pressed against the right edge of the page while keeping the container limits on the left. Here is my HTML:
.container {
width: 100%;
max-width: 1260px;
padding-right: 30px;
padding-left: 30px;
margin-right: auto;
margin-left: auto;
}
.main-screen {
width: 100%;
background: linear-gradient(180deg, #dedde2 0%, #e3e6ed 44.29%, #dde6ef 100%);
}
.main-screen-content {
display: flex;
justify-content: space-between;
padding-top: 118px;
}<section class="main-screen">
<div class="container">
<div class="main-screen-content">
<div class="main-screen-title">
<h1>
Replace awkward lab visits with at-home <span class="blue-text-style">STI testing</span> and
<span class="orange-text-style">treatment</span>.
</h1>
<div class="site-button main-screen-button">
<button class="text-button">
Get started
</button>
</div>
</div>
<div class="main-screen-img">
<img src="./img/main-screen-img.png" alt="">
</div>
</div>
</div>
</section>