Body with Padding for an App

I am trying to learn CSS and am building an app in HTML with no scrolling. I'm taking many tutorials on CSS but am having a problem that feels almost embarrassing. I have a blue background and a white rectangular body, and I want the white body to have even spacing on all sides. I only have a header and a body in the DOM. The CSS file is pulled in externally. Here is my CSS, this is the best I've gotten so far:

html, body{
	display:block;
	margin:0;
	padding:0;
}
 
html{
	background:#286491;
 
	width:100%;
	height:100%;
}
 
body{
 
	background:#ffffff;
 
	margin:2%;
	width:96%;
	height:96%;
 
 
}

What happens is that the margin of the body becomes 2% of the width. The width becomes 96% of the width. The height becomes 96% of the height though, and adds the 2% of the width to the top and bottom, causing it to give me three even margins except for the bottom, where it runs too low or off the page. I've tried the reverse and done all the styling to the html with padding but I get the same effect. I'd prefer to do a percentage-based layout but if people had pixel-based answers I'd give them a shot.

I achieved the proper effect doing all my styling through JavaScript in pixel measurements based off the window.innerWidth and window.innerHeight, but I'd prefer to do it through CSS.