Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
Margins and I will never be friends… I set the width and height of the h1 element to 100vw and 100vh to take up the whole viewport but I am left with a tiny white stripe down the whole left side of the screen. Can somebody help me figure out why? Thank you:)

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css">

      <nav id="nav-bar">
        <ul id="navbar">
          <li id="navbar"><a class="nav-link">About</a></li>
          <li id="navbar"><a class="nav-link">Work</a></li>
          <li id="navbar"><a class="nav-link">Contact</a></li>


    <section id="welcome-section">
      <h1>Hi I am Lola</h1>
      <p>a newbie in the coding world</p>

     <section id="projects">



/* file: styles.css */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  list-style-type: none;
  margin: 0;
  padding: 15px;
  overflow: hidden;
  background-color: #556B2F;

  float: left;

li a{
  display: block;
  color: white;
  font-size: 25px;
  padding: 10px 10px;
  text-decoration: none;

  text-align: center;
  padding-top: 70px;

  text-align: center;

  background-color: #FFE4B5;
  width: 100vw;
  height: 100vh;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

for this type of question, it is best to post a codepen

you can also inspect the area in the developer tools on the browser to see where that strip is coming from

Thank you so much I will have a look:)

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.