Currently, I am in the process of designing a portfolio page that utilizes a mix of flex and grid elements. However, during my development phase, I noticed a small gap of around 8 pixels on the left side of the page causing unevenness in the header section. Even after attempting solutions like setting left: -9px or adding overflow hidden properties, the issue persisted. The use of a strictly flex layout did not yield any positive results either. How can I eliminate this unwanted gap on the left side? Is this an instance of trailing-space or an overflow problem?
* {
box-sizing: border-box;
}
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
background: #3b3832;
background-size: cover;
font-family: "Roboto Condensed";
overflow: visible;
}
main {
width: 100vw;
}... (remaining CSS code here)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"
rel="stylesheet"
/>
<title></title>
</head>
<body>
<div class="tool-bar">... (remaining HTML code here)