I am building a portfolio page with a combination of flex and grid. on the left side of the page, there is a small gap of about 8 pixels, and my header is uneven. I have tried doing left: -9px; but it doesn't fix the problem. I have tried making overflow hidden, but I am unable to scroll. I've also tried going strictly flex for the layout but did not change the outcome. How do I get rid of the gap on the left side? Is this considered trailing-space or is it overflow?
* {
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;
}
header {
position: sticky;
width: 100vw;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
background-color: white;
opacity: 0.8;
justify-content: center;
z-index: 100;
}
.menu-icon {
display: none;
cursor: pointer;
}
nav {
width: 100%;
background-color: white;
opacity: 0.8;
display: flex;
justify-content: center;
align-items: flex-end;
}
nav ul li {
position: relative;
float: left;
}
nav ul li:hover {
background-color: gray;
opacity: 0.6;
border-radius: 6px;
}
.nav-links {
list-style: none;
display: flex;
flex-direction: row;
}
.nav-links li a {
display: block;
font-size: 1.5rem;
color: black;
text-decoration: none;
padding: 20px;
}
#menu-bar {
display: none;
}
header label {
font-size: 1.5rem;
color: black;
cursor: pointer;
display: none;
background-color: white;
opacity: 0.8;
padding: 20px;
float: right;
}
.tool-bar {
background-color: black;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 2rem;
z-index: 1;
text-align: center;
color: white;
}
.tool-bar ul {
list-style: none;
}
a {
text-decoration: none;
}
a:visited {
color: auto;
}
.tool-bar ul li a:visited {
text-decoration: none;
color: white;
}
.blend-text {
position: absolute;
left: 10vw;
right: 10vw;
padding: 5px;
text-align: center;
z-index: 1;
background-color: white;
opacity: 0.5;
}
.blend-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 90vh;
z-index: 0;
font-size: 4ch;
font-family: "Roboto Condensed";
font-weight: bold;
mix-blend-mode: screen;
}
.video-text-blend {
display: flex;
flex-direction: row;
top: 0;
align-content: center;
justify-items: center;
position: absolute;
width: 100vw;
height: 90vh;
z-index: -1;
}
video {
position: absolute;
width: 100vw;
height: 90vh;
object-fit: cover;
object-position: center;
}
.grid-container {
display: grid;
grid-template: repeat(auto-fit, 3, 1fr) / repeat(auto-fit, 4, 1fr);
grid-row-gap: 1.5rem;
grid-column-gap: 2rem;
}
.grid-item {
background-color: white;
opacity: 0.5;
-webkit-box-shadow: 0px 10px 13px -7px #000000,
10px 7px 1px 0px rgba(199, 184, 177, 0);
box-shadow: 0px 10px 13px -7px #000000,
10px 7px 1px 0px rgba(199, 184, 177, 0);
margin-right: 2rem;
}
.info {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
display: inline-block;
background-color: white;
opacity: 0.5;
}
.headshot {
width: 5rem;
height: auto;
margin: 1rem;
}
.skills {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
padding: 1rem;
text-align: center;
}
.projects {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;
text-align: center;
padding: 1rem;
}
footer {
background-color: gray;
opacity: 1;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 2rem;
z-index: 2;
color: white !;
margin-top: 2rem;
}
footer ul li {
list-style: none;
}
footer ul li a:visited {
color: white;
}
@media (max-width: 768px) {
.info {
grid-column-end: 4;
}
}
@media (max-width: 768px) {
.skills {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
}
}
@media (max-width: 768px) {
.projects {
grid-row-start: 3;
grid-row-end: 4;
}
}
@media (max-width: 463px) {
.nav-bar ul {
flex-direction: column;
}
.nav-bar a {
height: 48px;
}
header label {
display: initial;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
header .nav-bar {
position: absolute;
width: 100vw;
top: 100%;
right: 0;
left: 0;
display: none;
}
header .nav-bar ul {
width: 100vw;
}
#menu-bar:checked ~ .nav-bar {
display: initial;
}
}<!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">
<div class="phone">
<ul>
<li><a href="#">[email protected]</a></li>
</ul>
</div>
</div>
<header>
<input type="checkbox" id="menu-bar" />
<label for="menu-bar">Menu</label>
<nav class="nav-bar" id="drobdown-items">
<ul class="nav-links">
<li><a href="/index.html">Home</a></li>
<li><a href="/about.html">About Me</a></li>
<li><a href="footer">Contact Me</a></li>
</ul>
</nav>
</header>
<main>
<div class="video-text-blend">
<video
poster="/images/dark_logo_white_background.jpg"
playsinline
autoplay
muted
loop
>
<source src="videos/drone-bw.mp4" type="video/mp4" />
<source src="/audio/mountain-drone copy.ogg" type="audio/ogg" />
</div>
<div class="blend-container">
<h2 class="blend-text">
Welcome, I develop websites and web applications
</h2>
</div>
<div class="grid-container">
<div class="grid-item info">
<img
class="headshot"
src="/images/headshot.jpeg"
alt="picture of me in the mountains"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In repellat
voluptas incidunt praesentium, aut obcaecati fugiat eligendi
necessitatibus, architecto molestias amet harum repudiandae quos
excepturi pariatur alias ex. Dolorem impedit distinctio, ducimus
voluptates nam blanditiis asperiores reprehenderit velit dolore
aliquid fugiat! Ad officia ab aliquam, ex maxime suscipit! Facilis
doloribus maxime enim corporis numquam labore quia qui temporibus
libero dignissimos.
</p>
</div>
<div class="grid-item skills">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatibus magni minus voluptas repellendus natus optio hic neque
ipsa dolor, non iure saepe dolore autem sed provident, minima
corrupti. Quam quos quia impedit in iure alias esse ratione
doloremque reiciendis nam. Dolores doloremque consequatur repellat
cum iusto accusantium modi obcaecati voluptas et dolore numquam
minima quis dolor suscipit dolorem, reprehenderit alias?
</p>
</div>
<div class="grid-item projects">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
nam quod, eum veritatis porro, maiores assumenda voluptas labore
nisi pariatur eveniet possimus cum dolorum molestias corrupti sunt?
Laborum quia quo nostrum aliquid sunt, sint cum doloremque tenetur,
debitis labore deserunt magni. Cumque, voluptatibus? Aspernatur
perferendis obcaecati maiores dolor consectetur nihil.
</p>
</div>
</div>
</main>
<footer class="footer-bar">
<ul>
<li><a href="#">[email protected]</a></li>
</ul>
</footer>
</body>
</html>Is this what you need? Check the snippet
I just removed padding.
* {
margin:0;
padding:0;
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;
}
header {
position: sticky;
width: 100vw;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
background-color: white;
opacity: 0.8;
justify-content: center;
z-index: 100;
}
.menu-icon {
display: none;
cursor: pointer;
}
nav {
width: 100%;
background-color: white;
opacity: 0.8;
display: flex;
justify-content: center;
align-items: flex-end;
}
nav ul li {
position: relative;
float: left;
}
nav ul li:hover {
background-color: gray;
opacity: 0.6;
border-radius: 6px;
}
.nav-links {
list-style: none;
display: flex;
flex-direction: row;
}
.nav-links li a {
display: block;
font-size: 1.5rem;
color: black;
text-decoration: none;
padding: 20px;
}
#menu-bar {
display: none;
}
header label {
font-size: 1.5rem;
color: black;
cursor: pointer;
display: none;
background-color: white;
opacity: 0.8;
padding: 20px;
float: right;
}
.tool-bar {
background-color: black;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 2rem;
z-index: 1;
text-align: center;
color: white;
}
.tool-bar ul {
list-style: none;
}
a {
text-decoration: none;
}
a:visited {
color: auto;
}
.tool-bar ul li a:visited {
text-decoration: none;
color: white;
}
.blend-text {
position: absolute;
left: 10vw;
right: 10vw;
padding: 5px;
text-align: center;
z-index: 1;
background-color: white;
opacity: 0.5;
}
.blend-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 90vh;
z-index: 0;
font-size: 4ch;
font-family: "Roboto Condensed";
font-weight: bold;
mix-blend-mode: screen;
}
.video-text-blend {
display: flex;
flex-direction: row;
top: 0;
align-content: center;
justify-items: center;
position: absolute;
width: 100vw;
height: 90vh;
z-index: -1;
}
video {
position: absolute;
width: 100vw;
height: 90vh;
object-fit: cover;
object-position: center;
}
.grid-container {
display: grid;
grid-template: repeat(auto-fit, 3, 1fr) / repeat(auto-fit, 4, 1fr);
grid-row-gap: 1.5rem;
grid-column-gap: 2rem;
}
.grid-item {
background-color: white;
opacity: 0.5;
-webkit-box-shadow: 0px 10px 13px -7px #000000,
10px 7px 1px 0px rgba(199, 184, 177, 0);
box-shadow: 0px 10px 13px -7px #000000,
10px 7px 1px 0px rgba(199, 184, 177, 0);
margin-right: 2rem;
}
.info {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
display: inline-block;
background-color: white;
opacity: 0.5;
}
.headshot {
width: 5rem;
height: auto;
margin: 1rem;
}
.skills {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
padding: 1rem;
text-align: center;
}
.projects {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;
text-align: center;
padding: 1rem;
}
footer {
background-color: gray;
opacity: 1;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 2rem;
z-index: 2;
color: white !;
margin-top: 2rem;
}
footer ul li {
list-style: none;
}
footer ul li a:visited {
color: white;
}
@media (max-width: 768px) {
.info {
grid-column-end: 4;
}
}
@media (max-width: 768px) {
.skills {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
}
}
@media (max-width: 768px) {
.projects {
grid-row-start: 3;
grid-row-end: 4;
}
}
@media (max-width: 463px) {
.nav-bar ul {
flex-direction: column;
}
.nav-bar a {
height: 48px;
}
header label {
display: initial;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
header .nav-bar {
position: absolute;
width: 100vw;
top: 100%;
right: 0;
left: 0;
display: none;
}
header .nav-bar ul {
width: 100vw;
}
#menu-bar:checked ~ .nav-bar {
display: initial;
}
}<!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">
<div class="phone">
<ul>
<li><a href="#">[email protected]</a></li>
</ul>
</div>
</div>
<header>
<input type="checkbox" id="menu-bar" />
<label for="menu-bar">Menu</label>
<nav class="nav-bar" id="drobdown-items">
<ul class="nav-links">
<li><a href="/index.html">Home</a></li>
<li><a href="/about.html">About Me</a></li>
<li><a href="footer">Contact Me</a></li>
</ul>
</nav>
</header>
<main>
<div class="video-text-blend">
<video
poster="/images/dark_logo_white_background.jpg"
playsinline
autoplay
muted
loop
>
<source src="videos/drone-bw.mp4" type="video/mp4" />
<source src="/audio/mountain-drone copy.ogg" type="audio/ogg" />
</div>
<div class="blend-container">
<h2 class="blend-text">
Welcome, I develop websites and web applications
</h2>
</div>
<div class="grid-container">
<div class="grid-item info">
<img
class="headshot"
src="/images/headshot.jpeg"
alt="picture of me in the mountains"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In repellat
voluptas incidunt praesentium, aut obcaecati fugiat eligendi
necessitatibus, architecto molestias amet harum repudiandae quos
excepturi pariatur alias ex. Dolorem impedit distinctio, ducimus
voluptates nam blanditiis asperiores reprehenderit velit dolore
aliquid fugiat! Ad officia ab aliquam, ex maxime suscipit! Facilis
doloribus maxime enim corporis numquam labore quia qui temporibus
libero dignissimos.
</p>
</div>
<div class="grid-item skills">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatibus magni minus voluptas repellendus natus optio hic neque
ipsa dolor, non iure saepe dolore autem sed provident, minima
corrupti. Quam quos quia impedit in iure alias esse ratione
doloremque reiciendis nam. Dolores doloremque consequatur repellat
cum iusto accusantium modi obcaecati voluptas et dolore numquam
minima quis dolor suscipit dolorem, reprehenderit alias?
</p>
</div>
<div class="grid-item projects">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
nam quod, eum veritatis porro, maiores assumenda voluptas labore
nisi pariatur eveniet possimus cum dolorum molestias corrupti sunt?
Laborum quia quo nostrum aliquid sunt, sint cum doloremque tenetur,
debitis labore deserunt magni. Cumque, voluptatibus? Aspernatur
perferendis obcaecati maiores dolor consectetur nihil.
</p>
</div>
</div>
</main>
<footer class="footer-bar">
<ul>
<li><a href="#">[email protected]</a></li>
</ul>
</footer>
</body>
</html>