Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

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">
  <head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <link rel="stylesheet" href="./styles.css">
  </head>

    <header>
      <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>
          </ul>

      </nav>
    </header>

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


     <section id="projects">

     </section>

 </body>

 <footer></footer>
  </html>

/* file: styles.css */
#nav-bar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

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

li#navbar{
  float: left;
}

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

h1{
  text-align: center;
  padding-top: 70px;
}

p{
  text-align: center;
}

#welcome-section{
  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:

2

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

3

Thank you so much I will have a look:)

4

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