white space between green div and both top and sides of screen
My index page
export default function Home()
{
return(
<div className = {stylesMain.bodyDiv}>
<div>home</div>
</div>
)
}
the css it's calling
.bodyDiv{
background-color: green;
height:500px;
width: 100%;
position: 'fixed';
display: 'flex';
justify-content: 'center';
align-items: 'center';
margin: 0;
padding: 0;
}
As the image shows, the div is not reaching the edge of the page
I first tried to find solutions online, but none of the solutions were working for me. One solution in particular popped up multiple times which was to make a and set its margin and padding to 0 but whenever I try to use a body tag
export default function Home()
{
return(
<body>
<div className = {stylesMain.bodyDiv}>
<div>home</div>
</div>
</body>
)
}
it throws this error: Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching in .
This seems to be a
CSSissue. You just need to add0margins to all elements in you styling. Try adding in yourstyle.cssfile the following and it should do the trick. Hope that helps.marginproperty will remove all margins by default unless you specifically set margin to an element.paddingwill do the same for padding of the elements,box-sizingallows to include the padding and border in an element's total width and height. If you setbox-sizing: border-box;on an element, padding and border are included in the width and height.