Guys, i’ve already made a post about this problem, but noone had and answer… Can anyone have a closer look, cause i cant find the solution.
Here is my picture:
HTML:
<head>
<link href="https://fonts.googleapis.com/css?family=Ewert|Great+Vibes|Shojumaru" rel="stylesheet">
</head>
<div id="slika1">
<div class="container">
<div class="jumbotron">
<h1>PREKMURJE</h1>
</div>
</div>
<div>
<ul>
<li><a href="#s1">Domov</a></li>
<li><a href="#s2">Zgodovina</a></li>
<li><a href="#s3">Znamenitosti</a></li>
<li><a href="#s4">Galerija</a></li>
</ul>
</div>
<header id="s1">
<div class="container">
<h3>O prekmurju</h3>
<p><big>Prekmurje je nižinska pokrajina na skrajnem severovzhodnem delu Slovenije, ob meji z Avstrijo in Madžarsko, na levem bregu reke Mure, po kateri je tudi dobila ime. Pokrajina je večinoma poljedelska, večji mesti pa sta Murska Sobota in Lendava.
Prekmurje je bilo vedno in je še vedno gospodarsko in politično odmaknjeno od ostalih slovenskih pokrajin. Zaradi geografske lege in politike je bilo mnogo bolj podvrženo raznarodovalnim vplivom od konca 11. stoletja dalje. Prekmurje je pretežno ravninska pokrajina. Geografsko je razdeljeno na tri območja: hribovnato področje severno od Murske Sobote je Goričko; vzhodno proti Muri leži Ravensko, jugovzhodno od Murske Sobote pa leži Dolinsko. Okrog Lendave pa je manjše gričevnato področje Lendavske gorice.
Najvišji vrh Prekmurja - Kugla (418 mnm) leži v naselju Sotin.
Površina Prekmurja je 948,48 km².<big></p>
</header></div>
<div class="container">
<div class="jumbotron">
<iframe width="560" height="315" src="https://www.youtube.com/embed/jpaXuSi2Tmw"
</div>
</div>
</div>
CSS:
h1 {
margin: 0px;
position:relative;
bottom: 15px;
text-align: center;
font-family: Ewert;
color: #004d00;
font-size: 70px;}
h3 {
text-align: center;
padding-top: 30px;
font-size: 50px; }
ul {
list-style-type: none;
margin: 0px;
padding: 0;
background-color: #f1f11;
font-family: Shojumaru;
overflow: hidden;
text-align: center;
border: 5px double;
}
li {
display: inline-block;
}
li a {
display: inline-block;
color: white;
text-decoration: none;
font-size: 20px;
}
li a:hover:not(.active) {
background-color: grey;
}
a {
margin: 10px;
}
h3{
float: middle;
font-family: Great Vibes;
position: relative;
bottom: 30px;}
div {
padding-top: 25px;}
p {
float: center;
padding-right: 100px;
padding-left: 100px;
padding-bottom: 100px;
position: relative;
bottom: 55px;
text-shadow: white 0px 0px 10px;
}
.container {
text-align: center;}
iframe {
position:relative;
bottom:50px;
}
#slika1 {
background: url("http://globalmedicalco.com/photos/globalmedicalco/26/126088.jpg");
background-size: auto 100%;
background-repeat: no-repeat;
padding: 25px;
}