Flexbox, position: fixed, and overflow

HTML-CSS
1

I am hoping that someone could help me understand what is going on with my header row with the navbar breaking out of my centering container. Here is my CSS for creating the main centering container, the flex container and other styles:

  background: rgb(153,153,153);
  box-sizing: border-box;
  color: rgb(9,9,9);
  font-family: 'Roboto', sans-serif;
  font-size:18px;
  height: 100%;
}
 a {
   color: rgb(80,89,58);
   text-decoration: none;
 }
 li {
   list-style: none;
 }
 /* Floxbox settings */
 #container {
   border: 1px solid darkblue;
   position: relative;
   margin: 0 auto;
   max-width: 1024px;
 }
#header {
  overflow: hidden;
  position: fixed;
  top: 0;
  height: auto;
  width: 80%;
}
.main {
  margin-top: 100px;
}
.flex-container {
  display: flex;
  align-items: center;
}
.flex-container__column {
  display: flex;
  flex-direction: column;
}
.stylist-logo {
  border: 1px solid darkgray;
  margin-left: 25px;
  margin-top: 15px;
}
.nav {
  border: 1px solid #7A9199;
  margin-left: auto;
  margin-right: 25px;

}
.nav-link {
  padding: 0px 6px;
}```

I have a screenshot showing the main centering container `#container`, and the `#header` with borders surrounding these. I am seeking help understanding why the `navbar` is breaking outside of the main container. ![product-landing-fcc|690x387](upload://i292RrNfQoa3e2J4M9tUGauQLO6.jpeg)
2

product-landing-fcc
product-landing-fcc1366×768 89.7 KB

3

how you wanna build your web page
if you really want to help from me then add your code in Glitch
link:-https://glitch.com/

add your code here its pretty much easy to code here
and post the link or you can add the people there who can help you

4

Thank you @Gunjan! Never used Glitch and will check it out.

How will this work as a learning tool? I want to understand what I am not seeing in my code. Will I get to see what knowledge I might be missing with this tool? Thank you.

5

In glitch you can share your work with other with in a sec and even we can edit or code the same project sitting behind any computer here you have posted part of code i don’t know how actually you wanna build your output screen seems so messy
add all your code in glitch and explain how you want to build it so we could help you .

1 Like
6

@Gunjan, I’ve added my project to Glitch.

7

post here link man so i could see your code

8

This forum will not let me post links. My new user name is @charleyblue-product-land

9

you add the code in a wrong way

10

What do you mean? I cloned my app from GitHub using Glitch.

11

below your profile there is option to create project click new project as it build the index html file css file you have to add there file and for image you can drag and drop in assest file

12

My index.html and my styles.css files are both there as well as the img assets.

13

by cilcking the show btn it is suppose to show output

14

this is wrong way i have send you something just look it

15

Yes, you will need to click the app directory on the webpage.

16

Please click on the folder icon on the Show page.

17

yeah am looking through code enable me to code i ask there for join

18

As you can see on the output, I have a blue border around the main centering container. Then, I have a red border around the header element. The two elements inside of the header element are stylist-logo and nav

nav is breaking out of the main #container element.

19

I see that I might want to move my header out of the centering container for this design to work. Would you agree? I see what you have done and will take it from here. Thank you for your help @Gunjan

20

Well No problem man Happy coding man
Going for bed its 12:15 AM here