When i write the HTML code in confluence the header which i used for my html page is getting set to the Confluence as well. Attached image for more clarification.
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Menus</title>
<link rel="stylesheet" type="text/css" href="assets/menus.css">
</head>
<body>
<header>
<a class="logo" href="#"><span>Everyday Things</span></a>
<nav>
<ul>
<li><a href="#">Calendar</a>
<ul>
<li><a href="#">ADAS H & S Calendar</a></li>
<li><a href="#">Team Calendar</a></li>
</ul>
</li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Work Instructions</a>
<ul>
<li><a href="#">Pre - Processing</a>
<ul>
<li><a href="#">HERE True</a></li>
<li><a href="#">First Generation</a></li>
</ul>
</li>
<li><a href="#">Processing</a>
<ul>
<li><a href="#">HERE True</a></li>
<li><a href="#">First Generation</a></li>
<li><a href="#">Montly Global DFP Runs</a></li>
</ul>
</li>
<li><a href="#">Post - Processing</a>
<ul>
<li><a href="#">Monthly</a></li>
<li><a href="#">Quarterly</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Python Scripts</a></li>
</ul>
</nav>
</header>
<article>
<div>
<h1>abc:</h1>
<p></p>
<p></p>
<p></p>
</div>
</article>
<aside>
<div>
<h3> </h3>
<p> </p>
</div>
</aside>
</body>
</html>
CSS Code :
body { color: #777; font-size: 16px; font-family: sans-serif; margin: 0; padding: 0; }
h1 { margin: 0px 0px 1em 0px; color: #076d6f; font-size: 1.7em; }
h3 { margin: 0px 0px 1.5em 0px; color: #339999; font-size: 1.1em; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; }
a { color: #00a2ff; text-decoration: none; }
header{ height: 450px; background: #eee url("banner.jpg") no-repeat center; margin-bottom: 50px; background-size: cover; position: relative; }
header a.logo { position: absolute; display: block; width: 154px; height: 57px; background: url("logo.jpg") no-repeat 0; background-size: contain; z-index: 1; top: 15px; left: 20px; }
header a.logo span { display: none; }
article { width: 70%; float: left; margin-bottom: 75px; }
article div { padding: 0px 40px 0px 40px; border-right: 1px solid #555; }
aside { width: 30%; float: left; }
aside div { padding: 0px 40px 0px 40px; }
nav { background-color: rgba(0,0,0,.6); position: relative; padding: 45px 0px 0px 180px; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav ul::after { content: ''; display: block; clear: both; }
nav ul li:hover { background-color: rgba(0,102,102,.8); }
nav ul li:hover > ul { display: block; }
nav ul li a { display: inline-block; color: #fff; padding: 10px 20px; text-decoration:none; width: 125px; }
nav ul li a:hover{ background-color: #339999 }
nav ul ul { display: none; position: absolute; background-color: rgba(0,102,102,.8); }
nav ul ul li { position: relative; }
nav ul ul ul { left:100%; top: 0; }
/* top level*/
nav > ul { padding-left: 35px; }
nav > ul > li { float: left; }
nav > ul > li > a { padding: 10px 20px 15px 20px; width: auto; }
@media screen and (max-width: 750px)
header a.logo { width: 120px; height: 44px; }
article { width: 100%; float: none; margin-bottom: 40px; }
article div { margin: 0px 40px; padding: 0px 0px 30px 0px; border-right: none; border-bottom: 1px solid #555; }
aside { width: 100%; float: none; }
/*nav { padding: 70px 0px 0px 10px; }
nav > ul { padding-left: 0px; padding-right: 20px; }
nav > ul > li > a { padding: 8px 12px 10px 12px; } */
}
