(Solved) Width not adjusting to the whole page

#1

Hey there!

I am trying to have sections fit the whole page but there is still a margin despite me setting padding/margin to 0 both in the body and section parts. Can anyone help please? https://codepen.io/bensrd/pen/wrZrRo?editors=1100

#2

class .container-fluid, which wraps whole your page, has 15px padding on both sides.

#3

thanks @korzo, should I create a .container-fluid CSS with padding: 0px?

#4

set .container-fluid to padding:0 and h1 tag to margin-top:0
Hope it helps

#5

Thanks Junaid07 ! Now I still have the margin appearing despite the margin-top:0 setting :confused:

#6

add margin-top:0 to h1 tag

h1{
margin-top:0;
}

#7

It works wonders! Thank you so much :slight_smile:

#8

By default html sets margin top and bottom to all heading tags(Block level element). remove them and use padding instead.

Hope it helps

#9

So this means h1-h6 all include this behavior?

#10

yes even paragraph tags, Create a helper class for e,g

.no-padding{
padding:0;
}

and add this class whenever its needed.

#11

Great, thanks for the advice!

#12