I have Home page with elements as below:
<!doctype HTML>
<html lang = "en">
<head>
<!-- Head -->
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="refrest" content="600">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id = "container">
<!-- Top Header -->
<div class="header" id="myHeader">
<nav>
<ul>
<li><a class = "active" href = "">Home</a></li>
<li><a href = "district.html">District</a></li>
<li><a href = "resort.html">Resort</a></li>
</ul>
</nav>
</div>
</div>
<!-- ///////// -->
<script src="script/functions.js"></script>
<script>reposition();</script>
</body>
</html>
This is the difference in the header of District page:
<!-- Top Header -->
<div class="header" id="myHeader">
<nav>
<ul>
<li><a href = "index.html">Home</a></li>
<li><a class = "active" href = "">District</a></li>
<li><a href = "resort.html">Resort</a></li>
</ul>
</nav>
</div>
And that of the Resort page:
<!-- Top Header -->
<div class="header" id="myHeader">
<nav>
<ul>
<li><a href = "index.html">Home</a></li>
<li><a href = "district.html">District</a></li>
<li><a class = "active" href = "">Resort</a></li>
</ul>
</nav>
</div>
The CSS section defining these elements are:
.header
{
padding: .625em .625em;
background: rgb(51, 51, 51);
color: #f1f1f1;
max-width: 100%;
z-index: 3;
}
nav
{
width: 100%;
height: 3.5em;
background-color: rgb(51, 51, 51);
padding-top: 0.3125em;
}
nav ul
{
list-style-type: none;
margin: 0;
}
nav ul li
{
/*display: inline;*/
float: left;
}
nav ul li a
{
font-family: Arial;
font-size: 1.25em;
font-weight: bold;
text-decoration: none;
display: block;
padding: .625em .75em .625em .75em;
background-color: rgb(51, 51, 51);
color: white;
}
nav ul li a:hover
{
background-color: rgb(120, 120, 120);
}
nav .active
{
background-color: rgb(100, 100, 100);
}
The full page can seen here. Pardon the sluggish speed of the free hosting page. It may take a several cycles to load right. You may need Private / Incognito mode to get it right (not sure why).
The problem I am having is on my local machine, the header section of the Home page somehow is smaller than that on the District and Resort pages when I use Chrome and regular mode to see it. This does not happen in Firefox, or when I use Chrome Incognito mode for that same pages.
When I copy that whole folder to another one and use regular Chrome to open the new links, that does not happen either.
I am out of my wit on this. Please help.