How and where to access html body in gatsby to avoid white space?

[santhoshnumberone]

I am having issue of large white spaces appearing on the right and the bottom of the web page. When testing for responsiveness of the web page.

I found a similar issues on stackoverflow

1. White space showing up on right side of page when background image should extend full length of page [closed]

2. Website has strange whitespace on right side of the page when the browser is resized to a smaller window

Solution in both the posts are same

html, 
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}

I don't know where exactly to add this in the gatsby, I found a post with a similar issue to mine regarding gatsby How do I style the body/main background?. Don't seem to understand what is the solution for this!

Found this post How to add a dynamic class to body tag in Gatsby.js? got some idea about using react-helmet, how exactly I can use it?

Could anyone explain how I can set the html body in gatsby, to avoid this large white space?

[LekoArts]

Thank you for opening this!

You can create a styles.css file at the root of your project, then create a gatsby-browser.js at the root of your project and import the file:

// in your gatsby-browser.js

import "./styles.css"

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!