Navbar full width while everything else under it has a invisible container

how do I achieve the effect that the navbar is full width, but everything below has a invisible container that is centered.

like in this picture:

if I set navbar a width, then the border will be 80% width too…

@zhouxiang19910319,
just make sure to give your main div a smaller width and to make it centered inside the webpage.

after the navbar I think I can just create a div and limit its width, how do I make all the elements inside the navbar has a certain width? let’s say 980px?

also if I just use container class, the bottom border will be limited to a certain width, but I still want it to stretch the whole viewport width.

You can declare a max-width property for the navbar element to make it have a max width.
Also, you can just declare the navbar to have a width of 980px. I would discourage against doing so, since you may have problems with responsiveness.

Regarding the bottom border, you can create a footer element and style it to your liking.

1 Like

I see. I will try to do so.
Also for this small project I did not put responsiveness in mind, I just want to create a site that looks exactly like the apple page I showed above using HTML CSS maybe a little bit of javascript.

Do you think that it is doable? Or do I need front end framework like react to do it?

Very doable and even easier if you don’t take responsiveness into account. Let us know if you need any help and make sure to show us your finished site.

I will definitely post the result here, thanks!