One issue I am facing is with two divs in my HTML file, both set to 50% width. The left div has a fixed position while the right div should be scrolling. I have set it to float, but there seems to be a white space around the background of the floating div:
This is my code:
for (i = 0; i < 100; i++) {
document.write(" <br>");
}.left {
flex: 1;
left: 0;
width: 50%;
background-color: #ffc30b;
height: 100vh;
position: fixed;
top: 0;
}
.left p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.right {
background-size: cover;
width: 50%;
background-color: black;
float: right;
}<body>
<section id="about">
<div class="left">
<p class="header">ABOUT</p>
</div>
<div class="right">
<div class="aboutimg"><img src="img.png" alt="me|Jessa" width="200" height="200" /></img>
</div>
</div>
</section>
</body>