CSS help for Responsive Web Design

Tell us what’s happening:
I am trying to set margin-top for welcome-section so that it is positioned under the navbar. Currently, the navbar covers the top part of this section. I have tried to set margin-top of welcome-section to some px height, but this just shifts the navbar down with the section, so it is still covering the top of my welcome-section.

Also I am having to set a negative margin so that there is no white space around my html elements, is there an easy way to remove the blank edges (seems to be around 20px width/height).

Your code so far

This is the codepen link:
https://codepen.io/hackerman1995/pen/PobrVQL

This is my HTML code so far.

<body>
<!-- NAVBAR -->
  <nav id="navbar">
    <ul>
      <li>link</li>
    </ul>
  </nav>
  
  <main>
<!-- WELCOME SECTION -->
    <section id="welcome-section">
      <h1>Hey I'm Eddy</h1>
      <p>an aspiring software developer</p>
    </section>

This is the CSS part

#navbar {
  background: gray;
  color: white;
  width: 100%;
  position: fixed;
  margin-top: -20px;
}

#welcome-section {
  background: linear-gradient(white, gray, black);
  height: 100vh;
}

Your browser information:

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

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

you can always just add a <div> that has the same height as you navbar at the top, also, when you write posts like this it’s helpful to add a link to the pen where you wrote the code.
the margin-top on the navbar isn’t necessary and instead you can have a positive value on margin-top on your <main>

So adding a div has worked for now, thank you. Is there a way to match the exact height of my navbar or do I just estimate a number of pixels and see what fits?
Added the codepen link!

So the margin-top on the navbar is to shift the navbar up and cover up the blank space on top. When I put any kind of margin on <main> it shifts both the navbar and main. I am confused as to why this is happening, since navbar is apart from <main>.

right, but since you have position: fixed on you nabar you’d better just set top: 0 so it will always be on top no matter the height of anything,

And that’s because margin specifies the distance between an element and another element, if you move that another element (like margin) the distance should be the same, right? that’s the intention, so your <main> will move with the navbar to keep the distance, when using top you remove your element from the flow of the document and it gets ignored by other elements, that’s why it works. As for getting en elements width, you can only do it with JS, but you can set the navbar height to anything you like like 30px for example and use those 30px (or any other value you would like) in margin-top of main.

#navbar {
  height: 50px /*you can change it*/;
  background: gray;
  color: white;
  width: 100%;
  position: fixed;
  top: 0;
}

#welcome-section {
  background: linear-gradient(white, gray, black);
  height: 100vh;
  margin-top: 50px /*should be the same as your navbar height*/;
}

also if i helped you then pls mark me as solution

See this:

CSS responsive web design

Html responsive web design

This might help :sparkles:

Ahh top: 0 makes sense, I forgot about that. As for using margin-top, I guess I’m still a bit confused as to why it doesn’t set the distance between <nav> and <section>. Or is it setting the distance from the edge of the parent element <body>? Otherwise, this definitely fixed the problem. Thanks so much for you help!

Will take a look thanks!

it’s because margin-top sets the distance between your element and the element above it, if that element above moves, the distance should remain the same so your element will move with it too

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