Header gets cut off when viewing HTML file in browser
I've got an assignment for school to make an web page about your favourite artist, I choose Guns N' Roses and wrote this code. However when I save this as an .HTML file and open this in my browser and expand some of the summary's the header gets cut off and I can't scroll it back. how do I solve this?
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
}
.wrapper{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);
*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98);
*/
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);
*/
/* clip-path: circle(25px at calc(0% + 45px) 45px);
*/
background: #000;
clip-path: circle(25px at calc(100% - 45px) 45px);
transition: all 0.3s ease-in-out;
}
#active:checked ~ .wrapper{
clip-path: circle(75%);
}
.menu-btn{
position: absolute;
z-index: 2;
right: 20px;
/* left: 20px;
*/
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
color: #fff;
cursor: pointer;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);
*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98);
*/
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);
*/
background: #000;
transition: all 0.3s ease-in-out;
}
#active:checked ~ .menu-btn{
color: #fff;
}
#active:checked ~ .menu-btn i:before{
content: "\f00d";
}
.wrapper ul{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li{
margin: 15px 0;
}
.wrapper ul li a{
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
background: #000;
position: relative;
line-height: 50px;
transition: all 0.3s ease;
}
.wrapper ul li a:after{
position: absolute;
content: "";
background: #fff;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);
*/
width: 104%;
height: 110%;
left: -2%;
top: -5%;
/* if the font is 'Oswald'*/
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
animation: rotate 1.5s linear infinite;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after{
transform: scaleY(1);
}
.wrapper ul li a:hover{
color: #fff;
}
input[type="checkbox"]{
display: none;
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
font-size: 14px;
}
.content .title{
position: absolute;
left: 23%;
bottom: 104%;
font-size: 40px;
}
@keyframes rotate {
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg);
}
}<!doctype html>
<html lang="nl-nl">
<head>
<meta charset="utf-8">
<title>Overzicht werk</title>
<link rel="icon" type="image/x-icon" href="gnr.png">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<input type="checkbox" id="active">
<label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
<div class="wrapper">
<ul>
<li><a href="index.html">Homepage</a></li>
<li><a href="Laatste-Nieuws.html">Laatste nieuws</a></li>
<li><a href="Tour-Info.html">tour info</a></li>
<li><a href="Fotoboek.html">Fotoboek</a></li>
<li><a href="overzicht.html">Overzicht werk</a></li>
<li><a href="Contact-Info.html">Contact</a></li>
</ul>
</div>
<div class="content">
<div class="title">
<h4> Overzicht van het werk</h4>
<h6>Guns n' Roses heeft 6 studioalbums, 1 verzamelalbum en 2 live albums</h6>
</div>
<details>
<summary> Appetite for Destruction </summary>
<h3><small>Appetite for destruction is het eerste studioalbum van Guns N' Roses. Dit album
werdt uitgebracht op 21 Juli 1987.<br>Op Appetite for destruction staan 12 nummers met een
speelduur van in totaal 52 minuten en 31 seconden.</small>
</h3>
</details>
<details>
<summary>Tracklist</summary>
<ul>
<li> 1. Welcome To The Jungle </li>
<li> 2. It's So Easy </li>
<li> 3. Nighttrain </li>
<li>4. Out Ta Get Me </li>
<li>5. Mr. Brownstone </li>
<li> 6. Paradise City </li>
<li> 7. My Michelle </li>
<li> 8. Think About You </li>
<li> 9. Sweet Child o' Mine </li>
<li> 10. You're Crazy </li>
<li> 11. Anything Goes </li>
<li> 12. Rocket Queen </li>
</ul>
</details>
<br>
<br>
<details>
<summary>G N' R Lies</summary>
<h3><small>G N' R Lies is het tweede studioalbum van Guns N' Roses. Dit album kwam uit in
1988.<br> Op G N' R Lies staan 8 nummers met een totale speelduur van 36 minuten en 8
seconden.
</small>
</h3>
</details>
<details>
<summary>Tracklist</summary>
<ul>
<li> 1. Reckless Life </li>
<li> 2. Nice Boys</li>
<li> 3. Move to the City </li>
<li> 4. Mama Kin </li>
<li> 5. Patience </li>
<li> 6. Used to Love Her </li>
<li> 7. You're Crazy </li>
<li> 8. One in a Million </li>
</ul>
</details>
<br>
<br>
<details>
<summary>Use Your Illusion I</summary>
<h3><small>Use Your Illusion I is het derde studioalbum van Guns N' Roses. Dit album komt uit
in 1991 en werdt tegelijk uitgegeven met Use Your Illusion II.<br> Op Use Your Illusion I
staan 16 nummers met een totale speelduur van 76 minuten en 4 seconden. Ofwel 1 uur 14 minuten
en 4 seconden.</small>
</h3>
<br>
</details>
<details>
<summary>Tracklist</summary>
<ul>
<li> 1. Right Next Door to Hell </li>
<li> 2. Dust N Bones </li>
<li> 3. Live and Let Die </li>
<li> 4. Don't Cry </li>
<li> 5. Perfect Crime </li>
<li> 6. You Ain't the First </li>
<li> 7. Bad Obsession </li>
<li> 8. Back Off Bitch </li>
<li> 9. Double Talkin' Jive </li>
<li> 10. November Rain </li>
<li> 11. The Garden </li>
<li> 12. Garden of Eden </li>
<li> 13. Don't Damn me </li>
<li> 14. Bad Apples </li>
<li> 15. Dead Horse </li>
<li> 16. Coma </li>
</ul>
</details>
<br>
<br>
<details>
<summary>Use Your Illusion II</summary>
<h3><small>Use Your Illusion II komt dus ook uit 1991 aangezien dit tegelijk werdt uitgegeven
met Use Your Illusion I en is het vierde studioalbum van de bang.<br> Op Use Your Illusion II
staan 14 nummers met een totale speelduur van 75 minuten en 57 seconden. Ofwel 1 uur 15
minuten en 57 seconden.</small>
</h3>
<br>
</details>
<details>
<summary>Tracklist</summary>
<ul>
<li> 1. Civil War </li>
<li> 2. 14 Years </li>
<li> 3. Yesterdays </li>
<li> 4. Knockin' on Heavens Door </li>
<li> 5. Get in the Ring </li>
<li> 6. Shotgun Blues </li>
<li> 7. Breakdown </li>
<li> 8. Pretty Tied Up </li>
<li> 9. Locomotive </li>
<li> 10. So Fine </li>
<li> 11. Estranged </li>
<li> 12. You Could be Mine </li>
<li> 13. Don't Cry </li>
<li> 14. My World </li>
</ul>
</details>
<br>
<br>
<details>
<summary>The Spaghetti Incident</summary>
<h3><small>The Spaghetti Incident? komt uit 1993 en is het vijfde studioalbum van Guns N'
Roses.<br> op The Spaghetti Incident? staan 13 nummers met een totale speelduur van 46 minuten
en 3 seconden.</small>
</h3>
<br>
</details>
<details>
<summary>Tracklist</summary>
<ul>
<li> 1. Since I Don't Have You </li>
<li> 2. New Rose </li>
<li> 3. Down on the Farm </li>
<li> 4. Human Being </li>
<li> 5. Raw Power </li>
<li> 6. Ain't It Fun </li>
<li> 7. Buick Makane </li>
<li> 8. Hair of the Dog </li>
<li> 9. Attitude </li>
<li> 10. Black Leather </li>
<li> 11. You Can't Out Your Arms Around a Memory </li>
<li> 12. I Don't Care About You </li>
<li> 13. Look at Your Game, Girl </li>
</ul>
</details>
<br>
<br>
<details>
<summary>Chinese Democracy</summary>
<h3><small>Chinese Democracy is het zesde en tot nu toe laatste studioalbum van Guns N' Roses,
Chinese democracy werdt uitgebracht in 2008.<br>Op Chinese Democracy staan 14 nummers met een
totale speelduur van 71 minuten en 25 seconden. ofwel 1 uur 11 minuten en 25 seconden.</small>
</h3>
<br>
</details>
<details>
<summary>Tracklist</summary>
<ul>
<li> 1. Chinese Democracy </li>
<li> 2. Shackler's Revenge </li>
<li> 3. Better </li>
<li> 4. Street of Dreams </li>
<li> 5. If the World </li>
<li> 6. There was a time </li>
<li> 7. Catcher in the Rye </li>
<li> 8. Scraped </li>
<li> 9. Riad n' the bedouins </li>
<li> 10. Sorry </li>
<li> 11. I.R.S. </li>
<li> 12. Madagascar </li>
<li> 13. This I Love </li>
<li> 14. Prostitute </li>
</ul>
<br>
<br>
<br>
</details>
</div>
</body>
</html>Put your header outside the element that contains the main content. Remove position: absolute;, top: 50%;, left: 50%;, transform: translate(-50%, -50%); from the .content class.
If you want to center the header, use text-align-last: center on the title class.
Here an example:
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
}
.wrapper{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);
*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98);
*/
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);
*/
/* clip-path: circle(25px at calc(0% + 45px) 45px);
*/
background: #000;
clip-path: circle(25px at calc(100% - 45px) 45px);
transition: all 0.3s ease-in-out;
}
#active:checked ~ .wrapper{
clip-path: circle(75%);
}
.menu-btn{
position: absolute;
z-index: 2;
right: 20px;
/* left: 20px;
*/
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
color: #fff;
cursor: pointer;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);
*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98);
*/
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);
*/
background: #000;
transition: all 0.3s ease-in-out;
}
#active:checked ~ .menu-btn{
color: #fff;
}
#active:checked ~ .menu-btn i:before{
content: "\f00d";
}
.wrapper ul{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li{
margin: 15px 0;
}
.wrapper ul li a{
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
background: #000;
position: relative;
line-height: 50px;
transition: all 0.3s ease;
}
.wrapper ul li a:after{
position: absolute;
content: "";
background: #fff;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);
*/
width: 104%;
height: 110%;
left: -2%;
top: -5%;
/* if the font is 'Oswald'*/
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
animation: rotate 1.5s linear infinite;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after{
transform: scaleY(1);
}
.wrapper ul li a:hover{
color: #fff;
}
input[type="checkbox"]{
display: none;
}
.content{
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
font-size: 14px;
}
.title{
text-align-last: center;
}
}
@keyframes rotate {
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg);
}
}<!doctype html>
<html lang="nl-nl">
<head>
<meta charset="utf-8">
<title>Overzicht werk</title>
<link rel="icon" type="image/x-icon" href="gnr.png">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<input type="checkbox" id="active">
<label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
<div class="wrapper">
<ul>
<li><a href="index.html">Homepage</a></li>
<li><a href="Laatste-Nieuws.html">Laatste nieuws</a></li>
<li><a href="Tour-Info.html">tour info</a></li>
<li><a href="Fotoboek.html">Fotoboek</a></li>
<li><a href="overzicht.html">Overzicht werk</a></li>
<li><a href="Contact-Info.html">Contact</a></li>
</ul>
</div>
<div class="title">
<h4> Overzicht van het werk</h4>
<h6>Guns n' Roses heeft 6 studioalbums, 1 verzamelalbum en 2 live albums</h6>
</div>
<div class="content">
<details>
<summary> Appetite for Destruction </summary>
<h3><small>Appetite for destruction is het eerste studioalbum van Guns N' Roses. Dit album
werdt uitgebracht op 21 Juli 1987.<br>Op Appetite for destruction staan 12 nummers met een
speelduur van in totaal 52 minuten en 31 seconden.</small>
</h3>
</details>
<details>
<summary>Tracklist</summary>
<ul>
<li> 1. Welcome To The Jungle </li>
<li> 2. It's So Easy </li>
<li> 3. Nighttrain </li>
<li>4. Out Ta Get Me </li>
<li>5. Mr. Brownstone </li>
<li> 6. Paradise City </li>
<li> 7. My Michelle </li>
<li> 8. Think About You </li>
<li> 9. Sweet Child o' Mine </li>
<li> 10. You're Crazy </li>
<li> 11. Anything Goes </li>
<li> 12. Rocket Queen </li>
</ul>
</details>
<br>
<br>
<details>
<summary>G N' R Lies</summary>
<h3><small>G N' R Lies is het tweede studioalbum van Guns N' Roses. Dit album kwam uit in
1988.<br> Op G N' R Lies staan 8 nummers met een totale speelduur van 36 minuten en 8
seconden.
</small>
</h3>
</details>
<details>
<summary>Tracklist</summary>
<ul>
<li> 1. Reckless Life </li>
<li> 2. Nice Boys</li>
<li> 3. Move to the City </li>
<li> 4. Mama Kin </li>
<li> 5. Patience </li>
<li> 6. Used to Love Her </li>
<li> 7. You're Crazy </li>
<li> 8. One in a Million </li>
</ul>
</details>
<br>
<br>
<details>
<summary>Use Your Illusion I</summary>
<h3><small>Use Your Illusion I is het derde studioalbum van Guns N' Roses. Dit album komt uit
in 1991 en werdt tegelijk uitgegeven met Use Your Illusion II.<br> Op Use Your Illusion I
staan 16 nummers met een totale speelduur van 76 minuten en 4 seconden. Ofwel 1 uur 14 minuten
en 4 seconden.</small>
</h3>
<br>
</details>
<details>
<summary>Tracklist</summary>
<ul>
<li> 1. Right Next Door to Hell </li>
<li> 2. Dust N Bones </li>
<li> 3. Live and Let Die </li>
<li> 4. Don't Cry </li>
<li> 5. Perfect Crime </li>
<li> 6. You Ain't the First </li>
<li> 7. Bad Obsession </li>
<li> 8. Back Off Bitch </li>
<li> 9. Double Talkin' Jive </li>
<li> 10. November Rain </li>
<li> 11. The Garden </li>
<li> 12. Garden of Eden </li>
<li> 13. Don't Damn me </li>
<li> 14. Bad Apples </li>
<li> 15. Dead Horse </li>
<li> 16. Coma </li>
</ul>
</details>
<br>
<br>
<details>
<summary>Use Your Illusion II</summary>
<h3><small>Use Your Illusion II komt dus ook uit 1991 aangezien dit tegelijk werdt uitgegeven
met Use Your Illusion I en is het vierde studioalbum van de bang.<br> Op Use Your Illusion II
staan 14 nummers met een totale speelduur van 75 minuten en 57 seconden. Ofwel 1 uur 15
minuten en 57 seconden.</small>
</h3>
<br>
</details>
<details>
<summary>Tracklist</summary>
<ul>
<li> 1. Civil War </li>
<li> 2. 14 Years </li>
<li> 3. Yesterdays </li>
<li> 4. Knockin' on Heavens Door </li>
<li> 5. Get in the Ring </li>
<li> 6. Shotgun Blues </li>
<li> 7. Breakdown </li>
<li> 8. Pretty Tied Up </li>
<li> 9. Locomotive </li>
<li> 10. So Fine </li>
<li> 11. Estranged </li>
<li> 12. You Could be Mine </li>
<li> 13. Don't Cry </li>
<li> 14. My World </li>
</ul>
</details>
<br>
<br>
<details>
<summary>The Spaghetti Incident</summary>
<h3><small>The Spaghetti Incident? komt uit 1993 en is het vijfde studioalbum van Guns N'
Roses.<br> op The Spaghetti Incident? staan 13 nummers met een totale speelduur van 46 minuten
en 3 seconden.</small>
</h3>
<br>
</details>
<details>
<summary>Tracklist</summary>
<ul>
<li> 1. Since I Don't Have You </li>
<li> 2. New Rose </li>
<li> 3. Down on the Farm </li>
<li> 4. Human Being </li>
<li> 5. Raw Power </li>
<li> 6. Ain't It Fun </li>
<li> 7. Buick Makane </li>
<li> 8. Hair of the Dog </li>
<li> 9. Attitude </li>
<li> 10. Black Leather </li>
<li> 11. You Can't Out Your Arms Around a Memory </li>
<li> 12. I Don't Care About You </li>
<li> 13. Look at Your Game, Girl </li>
</ul>
</details>
<br>
<br>
<details>
<summary>Chinese Democracy</summary>
<h3><small>Chinese Democracy is het zesde en tot nu toe laatste studioalbum van Guns N' Roses,
Chinese democracy werdt uitgebracht in 2008.<br>Op Chinese Democracy staan 14 nummers met een
totale speelduur van 71 minuten en 25 seconden. ofwel 1 uur 11 minuten en 25 seconden.</small>
</h3>
<br>
</details>
<details>
<summary>Tracklist</summary>
<ul>
<li> 1. Chinese Democracy </li>
<li> 2. Shackler's Revenge </li>
<li> 3. Better </li>
<li> 4. Street of Dreams </li>
<li> 5. If the World </li>
<li> 6. There was a time </li>
<li> 7. Catcher in the Rye </li>
<li> 8. Scraped </li>
<li> 9. Riad n' the bedouins </li>
<li> 10. Sorry </li>
<li> 11. I.R.S. </li>
<li> 12. Madagascar </li>
<li> 13. This I Love </li>
<li> 14. Prostitute </li>
</ul>
<br>
<br>
<br>
</details>
</div>
</body>
</html>