0

I'm building a website using the following template as a base: https://github.com/issaafalkattan/React-Landing-Page-Template

I'm running into a problem when removing the margin in several of the sections. For example (as seen using Chrome's developer-tools), I'd like to remove the 'orange' areas of the Gallery section:

Gallery - inspect element (before * select)

During my troubleshooting, I added

* {
    margin:0 !important;
    padding:0 !important;  
}

to both style.css and bootstrap.css to 'force' the margins to go away so I could find the true culprit later, but that only shifted the left margin to the right: Gallery - inspect element (after * select)

Because of this, I'm assuming React is overriding my CSS; is there a way I can 'ignore' React setting the margins for certain components? I'm new to React so apologies if this is a silly question, but I can't seem to find a fix for my specific problem.

Thank you!

OngoGablogian
  • 7
  • 3
  • Your container width needs to be 100% of the screen `width: 100vw;`. By the way, please share some code that would help us in answering your question – Nick Vu Apr 04 '22 at 01:43
  • Adding 'width: 100vw;' to the container fixed the issue. Thank you very much! – OngoGablogian Apr 04 '22 at 01:46
  • You should not be using `!important`, especially not on `*`: https://uxengineer.com/css-specificity-avoid-important-css/ https://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-a-css-property – Dai Apr 04 '22 at 01:54
  • I am aware - I was only using it to troubleshoot. – OngoGablogian Apr 12 '22 at 19:45

1 Answers1

0

Adding width: 100vw; to the container, as Nick Vu suggested, fixed my issue.

Majid M.
  • 4,467
  • 1
  • 11
  • 29
OngoGablogian
  • 7
  • 3