Here is the HTML code snippet I am currently working on:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width = device-width">
<meta name="description" content="Some training on web design">
<meta name="keywords" content="web, design">
<meta name="author" content="Houssem badri">
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<title>My Web design | Welcome</title>
</head>
<body>
<header>
<div class="branding">
<h1>Some title</h1>
</div>
<nav>
<ul>
<li><a href="#">Contact us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a class="current" href="#">Home</a></li>
</ul>
</nav>
</header>
<div class="left-col">
<section>
<article>
<h1>My first article</h1>
<p>Some Text</p>
</article>
<article>
<h1>My Second article</h1>
<p>Some Text</p>
</article>
</section>
</div>
<div class="mid-col">
<section>
<h1> Main section title </h1>
<p>Some Text</p>
</section>
</div>
<aside role="complementary">
<h1>Aside title</h1>
<p> Some text </p>
</aside>
<footer>
<h4>Copyright© <a href="#">blabla.com</a></h4>
</footer>
</body>
</html>
I also have a CSS file for styling purposes, which includes the following styles:
/* Global */
body{
background: #E1F9A8;
font-family: "Arial";
font-size: 16px;
width: 80%;
margin: auto;
overflow: hidden;
padding-bottom:60px;
}
ul{
margin:0;
padding:0;
}
/* Header */
header{
border: 1px solid;
border-radius: 10px;
background-color: #D0D8BE;
min-height: 75px;
padding-top:30px;
margin-top: 20px;
}
header nav{
margin-top:10px;
}
...
Upon viewing the output of my code, I noticed overlapping elements. I suspect that my HTML structure may not be correct. Here is an image showing the issue: