CSS Problems with my Personal Portfolio Page

Hey guys, I have some problems with my Personal Portfolio Page. I can`t post a link

The blue color isnt fullscreen, there is a gap as you can see in the codepen link. And if you scroll you can see the navbar is not on top, there is also a big gap between the navbar and the site. If I run the test it doesnt pass " The navbar should always be at the top of the viewport."

My HTML code

<nav>
  <ul id="navbar">
    <li><a href="#welcome-section">about</a></li>
    <li><a href="#projects">projects</a></li>
  </ul> 

<div id="welcome-section">
  <h1> hi, i`m burak </h1>
  <p> a web developer</p>
</div>

<div id="projects" class="work">
  <h2 class="project-tile"> some of my projects </h2>
  <a href="https://codepen.io/burakd/pen/vPmvoJ" target="blank" class="project-tile">
    <img class="project-pic" src="https://s16.directupload.net/images/190324/5ve5uh29.png"
         alt="project">
    <div class="project-title">Tribute Page</div>
  </a>
</div>

  <div id="contact" class="contact">
  <a id="profile-link" href="https://www.freecodecamp.org/burakd" target="_blank" class="contact-details">FreeCodeCamp</a>
  </div>

My CSS code

html,body {
  text-align:center;
}

#welcome-section {
  top: 0;
  background: #ADD8E6;
  min-height: 55vh;
  padding-top: 45vh;
}

#navbar {
    background: #ADD8E6;
    position: fixed;
    top: 0px;
    width: 97%
}

nav ul {
  text-align: right;
  width: 100%;
  background-color: #ADD8E6;
  position: fixed;
}

nav ul li {
  display: inline-block;
  margin: 60px;
  margin-bottom: 15px;
  margin-top: 25px;
  margin-left: 10px;
  margin-right: 120px;
}

You can find it under “code pen. io/ burakd/pen/VRGmOy”

just delete the spaces

Add this at the beginning of your CSS:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
1 Like

Wow thank you, it helped me. Could you tell me what the “*” means? Why I can`t add this in “html,body”? What is the difference?

*{
}

here * means all it makes the effect should be applicable for all the tag id and class

1 Like

* means every selector.
If you add it to html, body other elements (like nav) will still have some default styles.

1 Like

Thank you guys. I think I got it. So if I use “*” it adopt all commands for id and class. If something is not id or class, it won`t be adopted

To clarify, everything on the page will adopt properties placed in the * universal selector. This is the highest order selector you can have in your CSS, higher even than placing something in the html or body selectors. The link @jenovs posted is a good description if you need further info.