My task was to design the header section of a webpage to resemble this desired webpage look. I started by creating a "header" tag as a container and added a navbar within it. To display the items, I used an unordered list with CSS adjustments for a horizontal layout.
However, there is an unwanted margin at the top of the page (background color changed for visibility). Upon inspection using Chrome Dev tools, I discovered that the issue stemmed from the margin of the <ul tag, which I fixed by setting the margin to zero.
I am puzzled about why the margin appeared outside its parent <nav tag. Shouldn't the width of the <ul (content + margin) be contained within its container? Why does the margin width extend beyond its parent?
body {
margin: 0px;
}
/* Body Header */
#body-header {
height: 65vh;
opacity: 0.8;
background-image: url(https://ninjasfiles.s3.amazonaws.com/asset_0000000000000020_1549743985_macbook_mouse.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
/* Horizontal Lists */
.horizontal-list {
list-style: none;
padding-left: 0px;
}
.horizontal-list li {
display: inline-block;
margin: 0px 8px 8px 0px;
}
.horizontal-list li a {
color: white;
text-decoration: none;
transition: color 0.5s, border-bottom 4s;
}
.horizontal-list li a:hover {
color: lightgrey;
border-bottom: 1px solid white;
}
.text-center {
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title> My Resume </title>
<link rel="stylesheet" href="experiment.css">
</head>
<body>
<header id="body-header">
<nav>
<ul class="horizontal-list text-center">
<li>
<a href="#" > Home </a>
</li>
<li>
<a href="#about" > About </a>
</li>
<li>
<a href="#skills" > Skills </a>
</li>
<li>
<a href="#experience" > Experience </a>
</li>
<li>
<a href="#education" > Education </a>
</li>
<li>
<a href="#portfolio" > Portfolio </a>
</li>
<li>
<a href="#contact" > Contact </a>
</li>
</ul>
</nav>
<header>
</body>
</html>