There is a horizontal white bar, approximately 15px in height, across the top of every one of my pages when viewing my website's mobile version. Here is the relevant CSS code and HTML markup:
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}<!DOCTYPE html>
<html lang="en">
<body>
<div id="container">
<div id="navigation" class="navigationtext">
<h2><a href="">domain</a><br> the home page of First Last</h2>
<p><a href="/about/">About</a></p>
<p><a href="/blog/">Blog</a></p>
<p><a href="/contact/">Contact</a></p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
</body>
</html>I have tried many combinations of CSS properties (primarily "margin" and "padding") and have spent a lot of time searching the Web. Nothing seems to work.
Please let me know if you need anything. I will be checking this thread regularly tonight.