Help with Boostrap Overflow Issue?

Hi guys, I just started learning Boostrap 4 and I noticed that my site isn’t mobile friendly. I looked at it on my phone and through the Google Developer Tools, and there’s this big space on the right. Not sure why that’s happening, how can I fix this?

I also noticed a side scroll when I open it on my computer, how can I get rid of this overflow?

Link: https://mimis-flowers.netlify.app/
github: vanilla-js-projects/flowers-project at master · pllealfunes/vanilla-js-projects · GitHub

Looks okay on my iPhone plus except for pcitures at the bottom and the search box and label in the menu

Thanks for taking a look. When you say pictures at the bottom do you mean the footer? Or do you mean another section?

You’ve given your #header-intro a width of 500px, so that obviously won’t fit on a smartphone, and it causes that big white gap on the right.

As for the horizontal scrollbar, that’s coming from your contact-section, you’ve given the .row class a margin-left and margin-right of 15px.

1 Like

I mean the word pictures was misspelled at the bottom of the page when I viewed it.

1 Like

Thank you! I fixed my rows and the width of the #header-intro.

Oh okay, I fixed the spelling. Thanks!