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

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

#1

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…


#2

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


#3

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?


#4

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.


#5

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.


#6

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?


#7

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.


#8

I will definitely post the result here, thanks!