Responsive Design - Div disappears when resizing window - html

Question

Just trying to make two div elements (.left and .right) display vertically when width value is less than 800px. However, the div .left disappeared when I tried to do so. I removed some content from the code to keep it short.
Does anyone have an idea as to why this is happening and how to fix it?
This is my code:
* {
box-sizing: border-box;
}
body {
color: white;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #282C34;
}
.right {
right: 0;
background-color: #616161;
}
.centered {
position: absolute;
width: 100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.container {
position: relative;
border-style: solid;
border-color: #92a8d1;
background-color: #92a8d1;
}
#media screen and (max-width:800px) {
.left,
.right {
width: 100%;
/* The width is 100%, when the viewport is 800px or smaller */
}
}
<div class="split left">
<div class="centered">
<center>
<div class="container">
<div class="middle">
<div class="text">
<a></a>
</div>
</div>
<div class="information">
<h2>asd</h2>
</div>
</div>
</center>
</div>
</div>
<div class="split right">
<div class="centered">
<center>
<div class="container">
<div class="middle">
<div class="text">
<a></a>
</div>
</div>
<div class="information">
<h2>fgh</h2>
</div>
</div>
</center>
</div>
</div>
Thanks for your help!

Answer 1

* {
box-sizing: border-box;
}
body {
color: white;
margin: 0;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #282C34;
}
.right {
right: 0;
background-color: #616161;
}
.centered {
position: absolute;
width: 100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.container {
position: relative;
border-style: solid;
border-color: #92a8d1;
background-color: #92a8d1;
}
#media screen and (max-width:800px) {
.left,
.right {
width: 100%;
height: 50%;
/* The width is 100%, when the viewport is 800px or smaller */
}
.split {
position: relative;
}
body {
height: 100vh;
}
}
<div class="split left">
<div class="centered">
<center>
<div class="container">
<div class="middle">
<div class="text">
<a></a>
</div>
</div>
<div class="information">
<h2>asd</h2>
</div>
</div>
</center>
</div>
</div>
<div class="split right">
<div class="centered">
<center>
<div class="container">
<div class="middle">
<div class="text">
<a></a>
</div>
</div>
<div class="information">
<h2>fgh</h2>
</div>
</div>
</center>
</div>
</div>

Answer 2

Nest the two divs inside a wrapper div and work with media queries and the flex property. Like..
HTML:
<div class="wrapper">
<div class="left">
...
</div>
<div class="right">
...
</div>
</div>
CSS/SCSS
#media(max-width: 800px) {
.wrapper {
display: flex;
flex-direction: column;
...
}
}
Or Try:
<ul class="flex-container column">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.column {
-webkit-flex-direction: column;
flex-direction: column;
float: left;
}
.column li {
background: deepskyblue;
}