Hej wszystkim jestem nowy i od pewnego czasu siedzę w html/css tworzę pewną stronę internetową. Mam z nią pewien problem. Mianowicie w menu nazwanym middle mam 5 divów każdy ma przypisaną taka samą funkcję hover sprawiała ona że z lewej strony leciał pasek który zmieniał kolor danego diva z ciemno szarego na biały oraz kolor tekstu z białego na czerwony jednak zmieniał się tylko gdy najechałem na tekst w divie a nie na samego diva . Postanowiłem więc zrobić jak Pan Mirosław Zelent w swoim 3 odcinku html i zrobić by cały div był linkiem. Gdy już to zmieniłem układ wszystkich divów rozsypał się. I teraz pytanie dlaczego i jak to naprawić? Pytanie może być głupie ale naprawdę próbowałem to zmienić i nie wiem jak. Z góry serdecznie dziękuje za pomoc.
PS. Nie mam pojęcia w czym jest problem więc wklejam cały kod.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>afla project</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Arvo|Lato&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img src="images/logo.png" alt="Logo">
</div>
<center>
<nav>
<div class="middle">
<a href="podstrony/index.html"><button class="btn btn1">Strona Główna</button></a>
<a href="podstrony/aktualnosci.html"><button class="btn btn2">Aktualności</button></a>
<a href="podstrony/kontakt.html"><button class="btn btn3">Kontakt</button></a>
<a href="podstrony/onas.html"><button class="btn btn4">O nas</button></a>
<a href="podstrony/projekty.html"><button class="btn btn5">Projekty</button></a>
</div>
</nav>
</center>
</header>
<div class="background">
<div class="wrapper">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quasi minus, voluptas sapiente unde aliquid ab possimus ad aliquam aperiam eos illo est nulla explicabo perspiciatis modi itaque, eaque quam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quasi minus, voluptas sapiente unde aliquid ab possimus ad aliquam aperiam eos illo est nulla explicabo perspiciatis modi itaque, eaque quam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quasi minus, voluptas sapiente unde aliquid ab possimus ad aliquam aperiam eos illo est nulla explicabo perspiciatis modi itaque, eaque quam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quasi minus, voluptas sapiente unde aliquid ab possimus ad aliquam aperiam eos illo est nulla explicabo perspiciatis modi itaque, eaque quam?
</div>
<center>
<img src="images/gra.jpg" alt="zdjęcie z gry fps">
</center>
</div>
<center>
<div class="background1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
</center>
<center>
<div class="background2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
</div>
</center>
</body>
</html>
.middle {
position: absolute;
transform: translate(-50%, -50%) text-align: center;
text-align: center;
margin-top: 15px;
color:white;
}
.btn:first-child
{
margin-left:125px;
}
.btn {
background: none;
border: 2px solid white;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
padding: 12px 20px;
min-width: 200px;
margin: 10px;
cursor: pointer;
transition: color 0.4s linear;
position: relative;
font-size: 19px;
}
.btn:hover {
color: red;
}
.btn::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: -1;
transition: transform 0.5s;
transform-origin: 0 0;
transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
}
.btn1::before {
transform: scaleX(0);
}
.btn2::before {
transform: scaleX(0);
}
.btn3::before {
transform: scaleX(0);
}
.btn4::before {
transform: scaleX(0);
}
.btn5::before {
transform: scaleX(0);
}
.btn1:hover::before {
transform: scaleX(1);
}
.btn2:hover::before {
transform: scaleX(1);
}
.btn3:hover::before {
transform: scaleX(1);
}
.btn4:hover::before {
transform: scaleX(1);
}
.btn5:hover::before {
transform: scaleX(1);
}
body {
background-color: #1C1717;
margin: 0;
}
nav {
background-color:#cc0000;
margin: 0;
}
.logo {
margin-top:100px;
margin: auto;
margin-left: 400px;
}
.menu {
text-align: center;
text-decoration: none;
}
.menu > li {
display: inline-block;
list-style-type: none;
text-align: center;
text-decoration: none;
padding-top: 20px;
padding-bottom: 20px;
font-size: 18px;
line-height: 200%;
min-height: 40px;
padding-left: 30px;
padding-right: 30px;
font-family: 'Lato', sans-serif;
}
.wrapper {
font-family: 'Lato', sans-serif;
color: white;
margin-left: 120px;
margin-right: 120px;
margin-top: 100px;
}
#zdjgra {
width: auto;
height: auto;
margin-top: 40px;
margin-bottom: 40px;
}
.background {
background-color: #1C1717;
height: 550px;
color: white;
font-family: 'Lato', sans-serif;
}
.background1 {
background-color: #554B4B;
height: 550px;
color: white;
font-family: 'Lato', sans-serif;
padding: 70px;
margin-top: 100px;
margin-bottom: 0;
}
.background2 {
background-color: #1C1717;
height: 550px;
color: white;
font-family: 'Lato', sans-serif;
padding: 70px;
margin-top: 100px;
}
a:hover {
cursor: pointer;
color:#cc0000;
}
a:link {
color:white
background-color: transparent;
text-decoration: none;
}
a:link:hover{
color:#fff;
}
a:visited {
color:#fff;
background-color: transparent;
text-decoration: none;
}
a:visited:hover
{
color:#1C1717
}