I'm having trouble getting these two DIVs to display properly within a parent DIV while maintaining responsiveness. I want them to each take up 50% of the screen with a 10px margin between them. Does my current code approach seem correct?
.box-container {
width: 100%;
height: 84px;
margin: 0 auto;
background-color:#ED3538;
display:flex;
}
.box50-1, .box50-2 {
padding: 15px;
background-color:#353535;
background: rgb(53, 53, 53); /* older browsers */
background: rgba(53, 53, 53, 0.7);
float: left;
width: 45%;
}
.box50-1 {
margin-right:5px;
}
.box50-2 {
}<div class="box-container">
<div class="box50-1">
<h3>This is a title 1</h3>
<p>Some text</p>
</div>
<div class="box50-2">
<h3>This is a tille 2</h3>
<p>Some text</p>
</div>
</div>