<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
body{
padding:0;
margin:0;
font-family:sans-serif;
}
.container{
width:80%;
margin:0 auto;
}
header{
margin:0;
min-height:90px;
background-color: #344249;
border-bottom:#e8491d 3px solid;
}
header h1{
float:left;
}
h1 span{
margin-left:70px;
display:inline-block;
color:#db1c1c;
}
nav{
float:right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
display:inline-block;
text-decoration:none;
padding:10px;
margin-top:12px;
color:white;
border:2px solid #be1414;
background-color:#be1414;
margin:5px;
border-radius:4px
}
nav ul li a:hover{
background-color:black;
color:red;
}
#one{
min-height:400px;
background:url('./img/showcase.jpg') no-repeat 0 -400px;
text-align:center;
color:#ffffff;
margin:0;
}
#one h1{
margin-top:100px;
font-size:55px;
margin-bottom:10px;
}
#one p{
font-size:20px;
}
</style>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1> <span>ė</span>View</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">AboutUs</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section id="one">
<div class="container">
<h1> Welcome To Tech
</h1>
<p> This is a <br>
Example </p>
</div>
</section>
</body>
</html>
// Need help with optimizing the spacing in my HTML code. The unnecessary margin on heading h1 is causing a gap between the header and section, and I can't seem to resolve it.
I attempted to use margin-top property for heading h1 within section id one to center align it as follows: #one h1{margin:100px}
Setting margin to 0 inside the id one's h1 effectively removes the gap between header and section, but it also eliminates the margin flexibility for h1 within section with id one.