Sorry, i am a beginner also i'd like to understand the solution.
I want the text to be floated next to the image also i noticed that the image doesn't fully show up instead a proportion of it is underneath the header.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p, h1 {
margin: 0;
padding: 0;
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-top:0;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showtime img {
width:300px;
height:300px;
}
.clearfix {
overflow:auto;
}
#img1 {
float:right;
}
#img2 {
float:left;
}
footer {
margin-top:30px;
background-color:#191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear:both;
}
footer p{
text-align: center;
color: white;
}
<!doctype html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet"/>
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showtime">
<div>
<img src="./images/Person1.jpg" width="300px;" height="300px;">
<h2>Image</h2>
<p>The image will always try to be unique from the odthers and we will always try to deliver the best photo in our limited time</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
Use align="left" to float an image next to some text. The section showtime needs blank space to allow for the header height overlapping it.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p, h1 {
margin: 0;
padding: 0;
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-top:0;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showtime {
padding-top:60px;
}
#showtime img {
width:300px;
height:300px;
}
.clearfix {
overflow:auto;
}
#img1 {
float:right;
}
#img2 {
float:left;
}
footer {
margin-top:30px;
background-color:#191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear:both;
}
footer p{
text-align: center;
color: white;
}
<!doctype html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet"/>
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showtime">
<div>
<img align="left" src="./images/Person1.jpg" width="300px;" height="300px;">
<h2>Image</h2>
<p>The image will always try to be unique from the odthers and we will always try to deliver the best photo in our limited time</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
Replace CSS for the header with:
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-top: 0;
top: 0; // Added. Is required for fixed positioning
}
And add the following:
#showtime {
margin-top: 70px;
}
You need to add to css #showtime { padding-top: 100px;} because position: fixed; removes your element from relative positioning, so you need to add extra space on top,.
and add id to img tag <img id="img1" src="./images/Person1.jpg" width="300px;" height="300px;">. This is actually not the best idea. It's better to use classes.
You should do it the proper way by adding a class to img, id must be unique for all HTML document elements, you can't use it more than once. For example you could do:
CSS
.img1 { float: left; }
HTML
<img class="img1" src="./images/Person1.jpg" width="300" height="300">
Related
if you copy this code,for example in notepadd++ and open it with chrome, you can see a website that i have started to build. I want to add a Navigation bar in h2. But i already added a word called"Elektrotechnik " there. How can i add a navigation bar there that includes three other words on the right side of the H2 box?
enter code here
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="Stylesheet"
href="main.css"
</head>
<body>
<div id="wrapper">
<header>
<h1>CrackTec GmbH</h1>
<h2>Elektrotechnik<h2>
</header>
<nav>
<ul>
</ul>
</nav>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</div>
</body>
enter code here
header {
width: 100%;
height: 50px;
background-color: #B8860B;
}
h1 {
font-size: 50px;
margin-top: 15px;
color: white;
padding-left: 100px;
font-family: Arimo;
}
h2 {
color: white;
background-color: #556B2F;
padding-left: 100px;
margin-top: -39px;
font-family: Arimo;
}
You could insert list items to your list in such a way:
<header>
<h1>CrackTec GmbH</h1>
<div class="sub">
<h2>Elektrotechnik</h2>
<nav>
<ul>
<li><a>About</a></li>
<li><a>Portfolio</a></li>
<li><a>Contact Us</a></li>
</ul>
</nav>
</div>
</header>
Then use Flexbox to position your h2 and your list
*{
margin: 0;
padding: 0;
}
header {
width: 100%;
background-color: #B8860B;
}
h1 {
font-size: 50px;
color: white;
font-family: Arimo;
padding:1rem;
}
h2 {
color: white;
font-family: Arimo;
}
.sub {
padding: 1rem;
display: flex;
align-items: center;
background-color: #556B2F;
}
ul{
display: flex;
list-style: none;
padding: 0;
margin-left:1rem;
}
li {
margin: 0 0.5rem;
}
I want the about section to be under the FIXED header and on top of the footer?
I am struggling how to fix this problem, I tried to add padding to the top but i noticed that it just moves the content not the whole div.Also position relative does not fix the problem as the footer is not under the about section An explanation to the answer will be helpful to understand the answer properly.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
line-height: 50px
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-top:0;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
a:hover {
color:blue;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showtime {
position:relative;
top:100px;
width:80%;
margin: 0 auto;
background-color: #f2f2f2;
}
#showtime img {
width:300px;
height:300px;
}
/*Image Repz*/
.showright {
clear:both;
}
.highlight {
font-size:125%;
color:blue;
}
.showright img {
float:right;
clear:both;
}
.boxes:first-child {
padding-top:50px;
}
.boxes:not(:first-child) {
padding-top:100px;
}
.showright > p, .showright > h2 {
text-align: center;
}
.showleft img {
float:left;
clear:both;
}
.showleft > p, .showleft > h2 {
text-align: center;
}
footer {
margin-top:30px;
background-color:#191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear:both;
}
footer p{
text-align: center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet"/>
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showtime">
<div class="showleft boxes">
<h2>What are we about?</h2>
<p>In Mukhtar Photography, we specialise in creating a perfect video with the highest quality and we always tend to keep our promise. Whether it is an
Video or not we are <span class="highlight">MASTERS</span> at delivering the best photos
</p>
</div>
<div class="showleft boxes">
<h2>Why should you ask Mukhtar Photography for like: Marriages, videos?</h2>
<p>Because we put our dedication towards and is very unlikely to be any cancels to the project and if there is you will be paid 90% of the money you gave us.
</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
To make sure the content is behind the header, you can use "z-index" in css.
To arrange the footer below the content div, you have to make its position "relative".
To get spacing between the content and the footer, you can add a bottom margin to the content div.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
line-height: 50px
}
header {
background-color: #191919;
position: fixed;
z-index: 4;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-top:0;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
a:hover {
color:blue;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showtime {
position:relative;
top:100px;
width:80%;
margin: 0 auto;
margin-bottom: 50px;
background-color: #f2f2f2;
}
#showtime img {
width:300px;
height:300px;
}
/*Image Repz*/
.showright {
clear:both;
}
.highlight {
font-size:125%;
color:blue;
}
.showright img {
float:right;
clear:both;
}
.boxes:first-child {
padding-top:50px;
}
.boxes:not(:first-child) {
padding-top:100px;
}
.showright > p, .showright > h2 {
text-align: center;
}
.showleft img {
float:left;
clear:both;
}
.showleft > p, .showleft > h2 {
text-align: center;
}
footer {
position: relative;
margin-top:30px;
background-color:#191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear:both;
}
footer p{
text-align: center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet"/>
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showtime">
<div class="showleft boxes">
<h2>What are we about?</h2>
<p>In Mukhtar Photography, we specialise in creating a perfect video with the highest quality and we always tend to keep our promise. Whether it is an
Video or not we are <span class="highlight">MASTERS</span> at delivering the best photos
</p>
</div>
<div class="showleft boxes">
<h2>Why should you ask Mukhtar Photography for like: Marriages, videos?</h2>
<p>Because we put our dedication towards and is very unlikely to be any cancels to the project and if there is you will be paid 90% of the money you gave us.
</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
Add z-index for header. This Will Fix It.
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-top: 0;
z-index: 99; // ADD THIS LINE
}
As you can see in the results, the P and H2 elements does not align to last div
when i add "float" to the CSS . Probably because it takes it out of the normal document flow and wondering what to do. I am quite new to CSS and HTML so an explanation to your answer would be helpful.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p, h1 {
margin: 0;
padding: 0;
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-top:0;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showtime {
padding-top:60px;
padding-bottom:20px;
}
#showtime img {
width:300px;
height:300px;
}
/*Image Repz*/
.showright img {
float:right;
clear:both;
}
.showright > p, .showright > h2 {
text-align: center;
}
.showleft {
float:left;
clear:both;
}
footer {
margin-top:30px;
background-color:#191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear:both;
}
footer p{
text-align: center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet"/>
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showtime">
<div class="showright">
<img src="./images/Person1.jpg" width="300px;" height="300px;" >
<h2>Image</h2>
<p>The image will always try to be unique from the odthers and we will always try to deliver the best photo in our limited time</p>
</div>
<div class="showright">
<img src="./images/Person1.jpg" width="300px;" height="300px;" >
<h2>Image</h2>
<p>The image will always try to be unique from the odthers and we will always try to deliver the best photo in our limited time</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
Am having layout issues, trying to understand floats and how to position elements. Am very new to css/html. Could someone help me understand how this layout is going to work. Some problems:
1) Unable to change the height of footer without ruining layout, footer seems to get pushed upwards.
2) When i inspect the page through chrome the footer div is included inside the 'wrapper' div when it's outside it in the code.
3) Adding padding to the content div also seems to break the layout
<!DOCTYPE html>
<html lang="en">
<head>
<title>DCW</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!--NAV BAR -->
<nav>
<ul>
<div class="float-left">
<li><a class="active" href="default.asp">PD</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="float-right">
<li>Hire Us!</li>
</div>
</ul>
</nav>
<!-- HEADER -->
<header>
<div id="title_wrapper">
</div>
</header>
<!-- BODY CONTENT -->
<div id="wrapper">
<div id="content">
<div class="info">
col1
</div>
<div class="info">
col2
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-text">
content 2
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
Footer
</footer>
</body>
CSS:
html, body
{
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
p.thick {
font-weight: bold;
}
h1, p {
padding: 0;
margin: 0;
}
/*Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
/* Header */
header #title_text{
font-size: 100px;
font-family: arial;
}
header #title_wrapper{
text-align:center;
position: relative;
top: 200px;
}
header {
background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;
}
/*Content*/
#wrapper{
min-height: 70%;
height: auto;
height: 70%;
}
#content{
float:left;
width:100%;
height: 100%;
text-align: center;
}
#sidebar{
float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;
}
#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}
.img-circle {
border-radius: 50%;
}
.info{
width: 50%;
float: left;
}
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;
}
/* footer */
footer{
background-color: orange;
}
Cheers
I did make a +200px padding content with a +200px footer. Didn't changed anything besides the display:inline-block on the footer plus box-sizing: border-box; on the content.
html, body
{
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
p.thick {
font-weight: bold;
}
h1, p {
padding: 0;
margin: 0;
}
/*Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
/* Header */
header #title_text{
font-size: 100px;
font-family: arial;
}
header #title_wrapper{
text-align:center;
position: relative;
top: 200px;
}
header {
background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;
}
/*Content*/
#wrapper{
min-height: 70%;
height: auto;
height: 70%;
}
#content{
float:left;
width:100%;
height: 100%;
text-align: center;
padding:100px;
box-sizing: border-box;
}
#sidebar{
float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;
}
#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}
.img-circle {
border-radius: 50%;
}
.info{
width: 50%;
float: left;
}
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;
}
/* footer */
footer{
display: inline-block;
background-color: orange;
height:200px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>DCW</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!--NAV BAR -->
<nav>
<ul>
<div class="float-left">
<li><a class="active" href="default.asp">PD</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="float-right">
<li>Hire Us!</li>
</div>
</ul>
</nav>
<!-- HEADER -->
<header>
<div id="title_wrapper">
</div>
</header>
<!-- BODY CONTENT -->
<div id="wrapper">
<div id="content">
<div class="info">
col1
</div>
<div class="info">
col2
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-text">
content 2
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
Footer
</footer>
</body>
It is not necessary to give width and height as 100% for html and body or div in css width is 100% by default. You can mention the width only when it is required.
for giving height to footer just add clear:both for footer selector
footer{background-color: orange;clear:both;height:50px;}
this will solve problems 1 & 2. When you add padding the design breaks because each time when you add width it keeps adding to the current width already given to the same div or element. This can be solved either by re adjusting the element width or using box-sizing: border-box.
I'm currently learning HTML and CSS and I tried making my very first webpage but got stuck when I realized my h2 is not appearing anywhere on the page. Sorry Im a noob and have no idea what I did wrong. Please help! Thank you!
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: fixed;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: red;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>TryOne</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<h2>Hello!</h2>
</div>
</body>
</html>
Your header is fixed ... You need to move your div down with margin ..FIDDLE
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="DIV">
<h2>Hello!</h2>
</div>
--
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: fixed;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: red;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
#DIV{
position:absolute;
margin-top: 125px;
}
The issue here is related to your use of a fixed header.
Take a look at this:
http://codepen.io/anon/pen/XXpggN
All I did was put some padding on the top of the div with the h2 in it, which brought it out from underneath the header. For future reference, a fixed position header will float above the rest of the contents, so the next elements that you add are going to begin appearing right at the very top of the body because the header div floating up top there is not occupying any space on the main body page.
If you ever want to organize your divs in a manner such as this, you just need to specify the z-index values of the divs. In this case though, all you needed was to push the first element (h2 div) down a bit.
position:inherit; padding-top:110px;
your header overwrite other tag.
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: relative;
padding-bottom: 50px;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: back;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>TryOne</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<h2>Hello!</h2>
</div>
</body>
</html>
CSS:
h2 {
color: blue;
background-color: white;
text-align: center;
}
header {
background-color: black;
width: 100%;
height: 100px;
}
Hope this work :)