您好，我在页面上有两列。我想添加一些填充，以便我的文本很好地适合每一列top，bottom，left，right的中间。我尝试使用包装器并调整文本所在的div宽度，但是我必须做错了什么。这是我第一次尝试VH和VW。早些时候，我可以用它来做我想做的事情，但是经过几次刷新后，正确的div列将下降，次数或保持在原位。任何帮助将非常感激。
body{
background-color: rgb(0,0);
overflow-x: hidden;
}
*,html {
margin: 0 !important;
}
.left{
background-color: rgb(88,12,12);
height:100vh;
width:45vw;
font-size: 1em;
color: rgb(160,160,160);
float:right;
}
.leftw{
background-color: rgb(88,12);
height:100vh;
width:50vw;
font-size: 1em;
color: rgb(160,160);
float: left;
}
.right{
background-color: rgb(54,0);
height:100vh;
width:45vw;
float: left;
color: rgb(160,160);
}
.rightw{
background-color: rgb(54,0);
height:100vh;
width:50vw;
z-index:2;
float: right;
color: rgb(160,160);
}
@media only screen and (max-width: 700px) {
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="stickynav.js"></script>
<div class="leftw">
<div class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quia sunt soluta eaque ex nam iste aperiam. Omnis nesciunt eos magnam dolorem rem saepe dignissimos,distinctio autem maxime,earum aut?
</div></div>
<div class="rightw">
<div class="right">
Lorem ipsum dolor sit,amet consectetur adipisicing elit. Repellendus quibusdam ratione quisquam molestiae necessitatibus,magnam laboriosam consequuntur ipsam minima alias aliquid eaque animi asperiores libero minus consectetur,temporibus quia hic?
</div></div>
</body>
</html>