To ensure proper formatting and layout of your content, it is recommended to utilize inline block and position comments in the center of your 2 blocks. This approach prevents any unintended disruptions caused by elements in your HTML document that may interfere with a 50% 2 column layout.
For an example demonstration, you can refer to this Fiddle:
https://jsfiddle.net/dLgej4tx/3/
.main_wrap {
width: 100%;
}
.main_wrap_2 {
position: relative;
margin: 0 auto;
}
.left_wrap {
background-color: #fff;
display: inline-block;
width: 50%;
max-width: 930px;
position: relative;
vertical-align: top;
}
.right_wrap {
background-color: #fff;
display: inline-block;
width: 50%;
max-width: 930px;
margin-top: 80vh;
position: relative;
text-align: center;
vertical-align: top;
}
.carousel_wrap {
width: 92%;
margin-top: 80vh;
}
.content_wrap {
margin-top: 0px;
padding: 0;
position: relative;
clear: both;
}
.content {
margin: 0;
padding: 0;
font-family: 'Helvetica LT Std';
font-size: 12px;
line-height: 1.5;
width: 280px;
}
By implementing this method, you will enhance the usability and functionality of your layout for seamless user interaction.