I am currently working on a layout with two columns spanning across the page. I need to add some padding around the text in each column so that it sits nicely in the middle. I have been trying to adjust the div width and use wrappers, but something seems to be going wrong. This is my first time playing around with VH and VW units. Initially, I managed to get it close to what I wanted, but sometimes after refreshing the page, the right column would shift down or stay in place unexpectedly. Any tips or suggestions would be greatly appreciated.
body{
background-color: rgb(0, 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, 12);
height:100vh;
width:50vw;
font-size: 1em;
color: rgb(160, 160, 160);
float: left;
}
.right{
background-color: rgb(54, 0, 0);
height:100vh;
width:45vw;
float: left;
color: rgb(160, 160, 160);
}
.rightw{
background-color: rgb(54, 0, 0);
height:100vh;
width:50vw;
z-index:2;
float: right;
color: rgb(160, 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>