0

I know there were a lot of similar questions. But I have a feeling that mine is a bit different because I haven't found a solution anywhere. I created a new project in react. I removed App.css, index.css and only created one component which I add to App.js. I added a background to the component and the page shows a frame that I can't get rid of. What does it come from? Perhaps this is a problem in a new version of react or react-scripts. I do not know this because I am just getting started in this technology

This is how my page looks

These are the styles of my only component Package.json

Than
  • 21
  • 4

2 Answers2

2

Try this:

width: 100%;
min-height: 100vh;
height: 100%;
background-color: rgb(148, 163, 184);
align-items: center;
flex-direction: column;
justify-content: center;
position: fixed;
top: 0;
left: 0;
overflow: hidden;

or you can remove the default margin/padding

body { 
margin: 0;
padding: 0;
}
3ndless_____
  • 154
  • 1
  • 11
-1

May be it is box-sizing

try to reset it at the top level

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}
Indraraj26
  • 1,726
  • 1
  • 14
  • 29