Inside the .maroon section I have two .whitewrap sections. I was wondering why it doesn't wrap onto another line and displaying them side by side instead. The form should be underneath the text and graphic with some of the maroon showing in between.I don't want to add anything in between the .whitewrap sections. Please help.
.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 recieve $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>