White space instead of full device width, noticeable after using navbar-fixed-top

White space instead of full device width, noticeable after using navbar-fixed-top
0

#1

Hey guys,

I have set fixed-top in my nav, but the content is not using the full width causing the page to have a full width nav header, and the rest is not full width :

How can I make sure all the content is aligned to the fullwidth of the nav bar?


#2

Your navbar should collapse at smal sized screens … Take a look at my code


#3

Some additional notes that might be of interest:

the string of classes “col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12” is equivalent to “col-xs-12”. You don’t have to declare for all the types of screens if your element has the same size on the grid. If there is a particular size that you would like to have your element on the grid for some specific type of a screen size then you should declare only this type… like, “col-xs-12 col-lg-7”…

You can use “margin-top: {number-of-pixels}px;” property in css, as a better practice, instead of writing multiple br tags.

Good luck with your project!


#4

hi @iomikron thanks for your input !
I have tested it and it worked, however not very much to my liking.

I need more experience in styling.

I willcomplete the project for now as all the user stories are fulfilled.

Will definitely revisit this section in a while.