In order to ensure proper alignment, you must take into consideration the .item elements' border-left-width, border-right-width, margin-left, and margin-right. When the viewport width exceeds 700px, each .item element occupies a specific amount of horizontal space:
50% + 10px + 10px + 1px + 1px = 50% + 22px
↑ ↑ ↑ ↑ ↑
`width` │`margin-right` │
│ │ │
`margin-left` │`border-right-width`
│
`border-left-width`
This means that for 2 items with a width of 50% + 22px, the total width would exceed 100%, which is the width of .container, resulting in wrapping at viewport widths greater than 700px.
To keep them on the same row, adjust their width by accounting for the excess space caused by horizontal borders and margins. Subtract the extra space, 22px, from 50%:
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
}
.item {
margin: 10px;
border: 1px solid lightgray;
border-radius: 10px;
overflow: hidden;
width: 100%;
}
@media screen and (min-width:700px) {
.item {
width: calc(50% - 22px);
}
.container {
flex-direction: row;
}
}
<div class="container">
<div class="item">content</div>
<div class="item">content</div>
</div>
Alternatively, you can set flex-wrap: nowrap on .container. This will force the .item elements to be displayed in a row by adjusting their widths accordingly:
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
}
.item {
margin: 10px;
border: 1px solid lightgray;
border-radius: 10px;
overflow: hidden;
width: 100%;
}
@media screen and (min-width:700px) {
.container {
flex-direction: row;
flex-wrap: nowrap;
}
}
<div class="container">
<div class="item">content</div>
<div class="item">content</div>
</div>