So, I spent a few days learning flexbox, very cool tool. I am trying to apply flexbox properties to my site “Product Landing Page” but I am running into a problem.
When I try and set the header section to be “Fixed” at the top of the page, no matter what I try I cannot get the remaining flexboxes to line up below the fixed box on top.
I appreciate any and all help. You guys are great, and I appreciate all the help given thus far!
Can you be more descriptive? What are the remaining flexboxes?
You did some mistakes in your css file. First thing always remember that when you create an id for any html element you can use that element by using # not dot(.) because dot is used for class in css.
And You can not pass all tests until you create a media query for your project.
All of them, basically I want the header section to remain at the top of the page while allowing the remaining sections of the site to sit below it.
Thanks for the heads up on the ID # v. Class .
I was aware of the media query, I have it already coded but pulled it out so that I could focus on the header issue.
One way you can achieve this is giving a set height to your .header-container for ex. height:150px; then give your .body-container1 margin-top:150px this will effective bring everything down your div under header.
As @shimphillip said, set the height of ur navbar to 10em and give the rest content a margin top of 10em. Now as your navbar has a fixed positioning, dont forget to set top:0; to stick it to the top of page!