Is there a way to remove the offset of my page when width and height are 100%?

As I'm a very unexperienced person, when I try to set the body's width and height to 100% the image is offset to the right-down direction. I created a simple html to show what the problem is:

<html>
    <head>
    </head>
    <style>
        body{
            width: 100%;
            height: 100%;
        }
        .screen{
            width:100%;
            height:100%;
            background-color: aqua;
        }
    </style>
    <body>
        <div class="screen"></div>
    </body>
</html>

I attached a photo where you can see that white border on the left top zone. Maybe it's a really easy thing to solve and no one needs to know how, at least if you dont count me.

I've tried overflow: hidden;,overflow-x:hidden and overflow-y:hidden. What I;m trying to get is to remove that white border or stop the offset for my screen when width and height are 100%.

Solution

Web browsers like Google Chrome and Mozilla Firefox apply default CSS styles to all HTML elements through user agent stylesheets. These styles typically include padding and margin settings to ensure proper spacing and formatting when no custom CSS rules are defined.

In your case, you need to reset the padding and margins on the 'body' element to achieve the desired layout.

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
 }

Alternatively, you can reset the default padding and margins for all HTML elements by applying a global CSS reset.

* {
    margin: 0;
    padding: 0;  
 }