your overflow: hidden; is whats messing things up for you, the default setting for borders is content-box which adds pixels to the width and height of your elements, eg if you have a div 100px wide and add a 1px border to it is actual size will be 102px.

you can solve this by using box-sizing: border-box; which causes the border to be added to the inside of the element instead.

html,body{
    width: 100%;
    height: 100%;
    margin: 0; /* Space from this element (entire page) and others*/
    padding: 0; /*space from content and border*/
    border: solid blue;
    border-width: thin;
    display:block;
    box-sizing: border-box;
}

If you want to make this effect all borders used through out your site you can use this, saves having to set it each time you add a border.

*, *:before, *:after {
  box-sizing: border-box;
}

Try with

* { 
  outline: 1px solid red;
  outline-offset: -1px;
}

* is a global selector, while outline will not mess with your elements positions, it'll just add a 1px red outline

Also make sure you use a CSS reset (usually body has by default 8px margin http://www.w3.org/TR/CSS21/sample.html)

You can resize your window, open the debug console and inspect the elements that might create the issue. Take a look at the Style panel and test-edit the styles until you get it fixed. in Chrome's Console you also have the Emulate option to test your page for different devices.

This is all you need to do:

html{
    border: solid;
}

You can use:

border-width:2px;
border-style:solid;
border-color:black;

or as shorthand:

border: 2px solid black