Here is the HTML code I am working with:
<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<link
rel="stylesheet"
type="text/css"
href="css/index.css"
>
<title>Best company in the USA</title>
</head>
<body>
<div class="menu">
<h2>MENU</h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<nav role="navigation">
<div class="navWrap">
<h2 class="navClose"></h2>
<ul>
<li><a href="somelink.com">Home</a></li>
<li></li>
<li><a href="somelink.com">About us</a></li>
<li></li>
<li><a href="somelink.com">Services</a></li>
<li></li>
<li><a href="somelink.com">Locations</a></li>
<li></li>
<li><a href="somelink.com">Contact Us</a></li>
<li></li>
</ul>
</div>
</nav>
<div class="content">
<section class="first"></section>
</div>
</body>
</html>
This is my CSS code:
@CHARSET "US-ASCII";
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::-moz-selection {
background: none repeat scroll 0% 0% #D8262E;
}
/* More CSS code... */
Lastly, here is my jQuery:
$(document).ready(function () {
windowHeight = 0.9 * $(window).innerHeight();
$('.first').height(windowHeight);
$(window).resize(function () {
windowHeight = 0.9 * $(window).innerHeight();
console.log("height: " + windowHeight);
});
});
I have encountered a problem where there seems to be an extra margin of 8-10px on each side in the content class. One solution I found was to comment out the CSS in the .content class. However, I am looking for a better solution or insight into what might be causing this issue.
You can view a jsfiddle of this problem here: http://jsfiddle.net/kSdHU/ Thank you.