Can someone help me solve a layout issue?
I had set the min-width and max-width properties of two images to be the same, but when I changed the image in one of them, it caused an overflow. I removed the max-width property and also tried using the flex-grow property without success. Is there another approach I can take to achieve my desired layout?
#section_body_6.main.container {
padding-top: 6vw;
/* padding-right: 3vw; */
padding-bottom: 6vw;
/* padding-left: 3vw; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
background: linear-gradient(rgba(43, 48, 71, 0.4), rgba(43, 48, 71, 0.4)), url("/pix_builder/elements/images/makeup/1.png") fixed no-repeat center;
background-size: cover;
}
#section_body_6.main .inner {
height: 100%;
}
#section_body_6.main .inner .widget {
padding: 1vw;
}
#section_body_6.main .width {
width: 90%;
display: flex;
justify-content: center;
align-items: flex-start;
}
#section_body_6.main .inner.image {
padding: 1vw;
background-color: #fff;
width: 45%;
flex: 1 1 auto;
text-align: center;
min-height: 600px;
}
#section_body_6.main .inner.image .logo {
width: 100%;
max-width: 150px
}
#section_body_6.main .inner.image .main {
width: 100%;
max-width: 300px;
}
#section_body_6.main .inner.text {
display: flex;
flex-direction: column;
background-color: #f7a885;
padding-top: 2vw;
padding-right: 3vw;
padding-left: 3vw;
width: 55%;
flex: 1 1 auto;
min-height: 600px;
max-height: 600px;
}
#section_body_6.main .inner.text h1 {
font-size: 56px;
color: #fff;
font-family: 'Karla', sans-serif;
}
#section_body_6.main .inner.text p {
font-size: 20px;
font-family: 'Karla', sans-serif;
color: #fff;
}
#section_body_6.main .inner.text .signup {
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
}
#section_body_6.main .inner.text .signup .sign {
width: 100%;
max-width: 200px;
}
#section_body_6.main .inner.text .signup .form {
width: 70%;
}
#section_body_6.main .inner.text .signup form {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100%;
}
#section_body_6.main .inner.text .signup input {
padding: 0px 10px;
color: #020020;
border: 1px solid #ffffff;
display: block;
width: 100%;
height: 40px;
line-height: inherit;
border-radius: 3px;
font-family: "Karla", sans-serif;
margin: 1vw;
}
#section_body_6.main .inner.text .signup button {
background: #2b3047;
color: #ffffff;
align-items: center;
display: inline-flex;
flex-direction: column;
justify-content: center;
text-align: center;
transition: color 0.2s linear, background 0.2s linear, border-color 0.2s linear, text-shadow 0.2s linear;
text-decoration: none;
position: relative;
width: 100%;
font-weight: bold;
min-height: 48px;
min-width: 96px;
padding: 14px 24px;
font-family: "Karla", sans-serif;
border: none;
}<section id="section_body_6" class="main container">
<div class="width">
<div class="inner image">
<div class="widget">
<img class="logo" src="https://lh3.googleusercontent.com/uO-2GwlFxWnex3obmZmPi4xmZgdXofKigjih4aH_tmKswH-x56GfWFTB82Yquc6fJhWmNVwoCSDSjgH705-XWnQ=s0" data-image-upload-source="builder3" alt="" style="width:100%;max-width:150px">
</div>
<div class="widget">
<img class="main" src="/pix_builder/elements/images/makeup/5.png" data-src="/pix_builder/elements/images/makeup/5.png" alt="" style="width:100%">
</div>
</div>
<div class="inner text">
<div class="widget">
<h1>Look and Feel Perfect Every Day.</h1>
</div>
<div class="widget">
<p>
Subscribe to my newsletter to get my FREE Every Day Makeup Look guide, PLUS top secret tips and tricks used by the industry’s leading makeup artists.
</p>
</div>
<div class="signup">
<div class="widget">
<img class="lp-image-react w-8cdb4d98-8e02-3986-a823-950a991fde05 css-1cg3cc6 sign" src="https://lh3.googleusercontent.com/dmY1Sjs5FSKW-wkI-McMrvHbxsIIzeKI38qUb20rnpXb_llEPPoCudG3xhzuYB12sCn8DpRM_GnUUjCMjsDMiw=s0" data-image-upload-source="builder3" alt=""
style="width:100%;max-width:200px">
</div>
<div class="widget form">
<form action="#" method="get" target="_top">
<input type="email" id="email" placeholder="Email">
<button type="submit" onclick="popup()">Sign-Up</button>
</form>
</div>
</div>
</div>
</div>
</section>