My background image isn't covering the full width of the page

I’m currently working on my tribute page and the background image I’m using won’t cover the full width of the page, but leaves a white space around the edges. In Bootstrap 3 it covers the page fine, but in Bootstrap 4 it leaves this white space. I’ve check on both Chrome and Edge and the problem exists on both.

Also, how can I remove the white space between the flex columns (which come straight after the background image) and the background image? Or is this all part of the same general issue?

I would greatly appreciate some feedback on how to fix both of these little inconveniences.

The link is: https://codepen.io/Crimson_Macaw/pen/xJGbMv

margin:0
padding:0

inside body gets rid of some of the white space…
I think the top whitespace is related to how you define a ‘head’ section…

1 Like

Thanks, it got rid of the white spaces on the sides, but not on the top and bottom. I think if it were just an issue with the ‘head’ section, then there shouldn’t be any white space at the bottom between the flex columns and the background image. However, as can be seen, it’s still pretty sizeable.

margin: 0 instead of margin:20px inside of title selector fixes the top space issue

I also added a height property to your body selector (height: 100vh) and changed the blockquote’s css around as well.
Final result here: https://codepen.io/hbar1st/full/YjyMyR/
All blank spaces gone.

There are some concerns with the way you are defining your alignments etc. It doesn’t seem like the page will be responsive if you use px sizes instead of vw,vh or % or fr units but since that’s not the advice you are seeking today, I will not say anything further.

Thanks @hbar1st , all the issues seem to be gone. I know that the alignment definitions shouldn’t be made with px, but I’m still playing around with all the px, rem, %, and fr types. Also thanks on fixing the blockquote because I couldn’t figure out how to remove that large gap between the quote and Guybrush’s name.

Can I delete the forked pen ? (I don’t like to keep other people’s code around too long). Let me know when you have a copy so I can go ahead.

Yes you can go ahead and delete it. Just one further question though. I am trying to make two columns underneath, exactly like here: https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website2 , but for some reason the exact code from w3schools gives me two rows instead of two columns. Any idea on what’s missing from my code, or what should be added?

is the codepen the same link you gave earlier?

Yes it’s the same one. As you can see, there are two rows instead of two columns.

I changed this:

.row{
  display: flex;
 flex-wrap: nowrap;
 
}

to nowrap instead of wrap and now I see your columns properly.