Within the .maroon section, there are two .whitewrap sections. I am puzzled as to why they are not wrapping onto another line and instead displaying side by side. The form should be positioned below the text and graphic with some maroon showing in between. I do not want to add anything in between the .whitewrap sections. Your assistance is appreciated.
.maroon {
background-color: #663333;
display: flex;
align-items: center;
justify-content: center;
padding-top: 50px;
padding-bottom: 50px;
}
.whitewrap {
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.padding {
padding-top: 50px;
padding-bottom: 50px;
}
.wh {
width: 80%;
}
.row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
.column {
flex-direction: column;
flex-basis: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 100%;
display: block;
height: auto;
}
.whitewrap2 {
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}<section class="maroon">
<section class="whitewrap wh">
<div class="row">
<div class="column borderright"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/1f3cbe64-2615-afb7-9979-06694fa51b97.png">
<p class="text2">Purchase a combination of 1 suit, 1 tie and 1 shirt to receive $100 off your total.<br><br>Sign up for this offer below on the right. </p>
</div>
<div class="column">
<img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ab2884f4-5505-0c93-941c-bb177eeab689.png">
</div>
</div>
</section>
<section class="whitewrap2 wh padding">
<form action="https://facebook.us7.list-manage.com/subscribe/post?u=150448d54e332a15d70ff8ba8&id=a626d63797&f_id=0054d2e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span><br></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""><br><label for="mce-FNAME">First Name </label><br><input type="text" name="FNAME"
class=" text" id="mce-FNAME" value=""><br><label for="mce-LNAME">Last Name </label><br><input type="text" name="LNAME" class=" text" id="mce-LNAME" value="">
<br> <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Sign Up">
</form>
</section>
</section>