响应式DIV最大宽度50％

Question

我不相信我正确编码。试图在父DIV中彼此相邻的两个DIV相互作用。两者都应该是屏幕的50％，但我需要它们之间大约10px的余量。我到目前为止编码的方式是否有意义？

.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>

Answer 1

这就是我要做的https://jsfiddle.net/quod8jfL/1/

使用calc(50% - 5px)，因此两个div的宽度完全相同，并且两者之间的边距总是留有10px的间隙。

 .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: calc(50% - 5px);
}

.box50-1 {
    margin-right: 10px;
}