DLACZEGO DIVY W .LICZBASILOWNI NIE CHCĄ SIĘ WYŚRODKOWAĆ MIMO MARGIN:0 AUTO
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&display=swap&subset=latin-ext" rel="stylesheet">
</head>
<body>
<header>
<div class="logo"> <img src="img/logo.png"></div>
<nav>
<ul>
<li>
<a href="#">Jak zacząć</a>
<a href="#">Aktualności</a>
<a href="#">O nas</a>
<a href="#">Oferta</a>
<a href="#">Karnety</a>
<a href="#">Galeria</a>
</li>
</ul>
</nav>
</header>
<div class="photo1"></div>
<main>
<div class="liczbasilowni">
<div class="section">
<p>391</p>
<h2>Liczba siłowni w całej Europie</h2>
</div>
<div class="section">
<p>9</p>
<h2>Liczba siłowni które otworzymy</h2>
</div>
<div class="section">
<p>29</p>
<h2>liczba krajów w których się znajdujemy</h2>
</div>
</div>
</main>
</body></html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 500vh;
}
header {
height: 300px;
}
header img {
width: 10%;
display: block;
float: left;
margin-left: 50px;
}
.photo1 {
height: 400px;
width: 100%;
background-position: left;
background-image: url(img/photo1.jpg);
background-attachment: fixed;
}
nav {
width: 100%;
font-family: 'Roboto Condensed', sans-serif;
}
ul li {
list-style: none;
margin-top: 30px;
padding: 10px 35px;
}
li a {
padding: 20px;
float: left;
text-decoration: none;
color: black;
list-style: none;
margin-left: 60px;
text-transform: uppercase;
font-size: 20px;
}
li a:hover {
padding: 20px;
background-color: #f9ca24;
transition: 0.5s;
}
.liczbasilowni {
width: 100%;
margin: 0 auto;
height: 300px;
}
.section {
height: 300px;
width: 400px;
background-color: aqua;
float: left;
text-align: center;
}
.section p {
line-height: 200px;
font-size: 100px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
}
.section h2 {
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
font-size: 20px;
}