FCC Product Landing Project - header spaced from the top for unknown reason

1

Hello community,

Complete newbie here, trying to finish my product landing page project.

I keep running into problems with my formatting (seen below). When I find a way to fix one, another 3 pop up. When I start from scratch again, I seem to manufacture even cookier problems. My latest two pet peeves on my project are:

Being unable to customize my unordered lists within only my header
and my header being spaced from the top of the window, so scrolling through my page makes it appear a little at the top of the screen (fixed position header).

Anyone able to hold my hand a bit? Much appreciated.

-Alex

HTML

<header id="header">
  <img id="header-img" src="https://cdn.pixabay.com/photo/2019/02/24/11/49/icon-4017417_960_720.png" alt="logo">
  <h1 id="title">Alex's Web Development</h1>
  <nav id="nav-bar">
    <ul>
      <li>What I do</li>
      <li>Who I am</li>
      <li>How it works</li>
    </ul>
  </nav>
</header>

<div id="container">
  <div id="what-i-do">
  <h2>I do what I do when I do what I do. </h2>
  <p>Here is where I would write a nice summary of things I would do, or could do. So far I still can't do what I want to do, and I do not entirely understand the things I do do. Don't feel bad if you laughed at 'do do'.</p>
  </div>
  <div id="who-i-am">
    <h2>This would be a section dedicated to telling you who I am.</h2>
    <p>And it would probably attempt to be philosophical, or witty, and feel woefully short of both marks. At least for now I need it to be long enough to understand why my margins are not lining up how I would like them to.</p>
  </div>
  <div id="how-it-works">
    <h2>This would be a section dedicated to telling you how the genius of web development works.</h2>
    <p>And as soon as I figure out the answer, even a little bit, I will put it here. Seriously, help me. I am so lost...</p>
  </div>
</div>

***CSS***

header {
  display: flex;
  position: fixed;
  background-color: white;
  width: 100%;
  height: 75px;
  justify-content: space-between;
  flex-direction: row;
    
  @media (width:600px) {
    flex-direction: column;
    flex-wrap: wrap;
  }
  }

#title {
  align-content: start;
}
nav{
  padding: 10px;
}
#nav-bar ul {
  
  text-decoration: underline;
  list-style: none;
  display:flex;
  justify-content:space-between;
  padding: 0px 50px;
  width: 35vw;
  flex-direction: row;
}

#header-img {
  max-height: 75px;
  border-radius: 5px;
  margin-left: 10px;
}
2

Can you link to a CodePen?

Makes it much easier to see what’s happening.

3

Where is the container css? https://jsfiddle.net/943r8wje/

4

Unfortunately I can’t because I’m still too new on the forum.

5

I had created it and changed the background color to blue to see if anything happened but nothing did. I took it out but forgot to remove the id from that div.

edit: actually I just went back and did it again and I can make it blue, but I tried putting a margin-top in but it effects the header too. I have no idea why…

6

  1. You need to add top: 0; to the header. I would also remove the default margin from the body.

  2. You have a nested media query inside the header selector, that only works if you are using a CSS preprocessor (SASS/SCSS etc.).

  3. It is max-width not width in the media query (allthough the css inside it wont do much, and I don’t think it is doing what you want).

header {
  display: flex;
  position: fixed;
  background-color: white;
  width: 100%;
  height: 75px;
  justify-content: space-between;
  flex-direction: row;
  top: 0;
}

@media (max-width: 600px) {
  header {
    flex-direction: column;
    flex-wrap: wrap;
  }
}
7

Hey, thanks! That fixed it right up. I’ll get rid of the media query, too. I fiddle a lot with new things (which probably explains how I break it so much).I’m hoping I’ll look back on these types of questions and laugh in a few months.

Thanks again!

8

No problem. Playing around with things is the best way to learn, I say break all the things, it is a great way to learn.

I’m guessing you want to stack the header? If you remove the height from the header and then give the header selector inside the media query align-items: center; it will sort of work.

header {
  display: flex;
  position: fixed;
  background-color: white;
  width: 100%;
  /*   height: 75px; */
  justify-content: space-between;
  flex-direction: row;
  top: 0;
}

@media (max-width: 600px) {
  header {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
  }
}
9

Thank you. I actually hadn’t though about stacking yet. I was just playing around with the media query to see if anything changed when I made my window smaller. I WOULD like to stack my boxes further down the page after I create them if they are seen on a phone (the pricing section, like the example.) Now I’m trying to keep the body from scrolling behind the header so my in-page links don’t seem to jump further down the page then intended. HTML and I are going to have one of THOSE relationships for a little while, I can tell.

Thanks again for the help!