There seems to be an issue with white space appearing unexpectedly at the top and right side of the file in a website I am working on. Despite adding margin: 0; padding: 0; to both <body> and <html>, the problem persists.
After inspecting the site using Chrome DevTools, no elements were found to be causing this issue. The whitespace even appears when there is no CSS present. Below are the HTML and CSS codes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.min.css">
</head>
<body>
<section id="sec-1">
...
</nav>
</header>
...
<br>
Call or email us today.</h2>
...
</section>
...
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="78101114140b10110a1d191f1d161b01380119101717561b1715">[email protected]</a>
...
</section>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
And here is the corresponding CSS:
/* ==========================================================================
HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
========================================================================== */
...
normal;
}
...
@media print {
display: table;
}
...