I have been searching for solutions to my problem, but I can't seem to find one that works.
My goal is to create two columns that each take up 50% of the screen width. However, I am facing an issue where there is a gap at the top that I cannot seem to fix. Can someone please help me figure out what I am doing wrong?
Here is a visual representation of my problem.
Below is the code I am using:
<!DOCTYPE html>
<html lang="en>
<head>
<title>Test column</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container"><div class="col-left">
hello
</div><div class="col-right">
hello
</div></div>
</body>
</html>
This is my CSS:
html, body {
padding: 0;
height: 0;
}
.col-left {
display: inline-block;
width: 50%;
background: #1DA1F2;
height: 100vh;
}
.col-right {
display: inline-block;
width: 50%;
height: 100vh;
}