Text bellow image

1

Okay this is my third post, and i guess i have to keep on making new ones, since noone knows the answer. :confused:

My picture:

lasttime
lasttime1357×614 67.7 KB

As you can see, ‘‘TEXT BELLOW IMAGE’’ should be bellow image (as written) but its still on the picture? how is this possible? ive closed the parent <div of my image.

AAAND this is my HTML & CSS:

HTML:

<head>
   <link href="https://fonts.googleapis.com/css?family=Ewert|Great+Vibes|Shojumaru|Julius+Sans+One|Doppio+one" rel="stylesheet">
</head>

<div id="slika1">

<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>

<h1 align="center"><big>PREKMURJE<big>

</h1>


<div id="s1">
  <h2 align="center">O prekmurju</h2>
  <p>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.</p>
  </div>
  
</div>

<div>
  <p>TEXT-BELLOW-IMAGE</p>

CSS:

body {
margin: 0px;}

ul {
list-style-type: none;
background-color: grey;
margin: 0;
padding: 0;
overflow: hidden;
top: 0;
position: fixed;
width: 100%;
z-index: 1;}

li {
float: left;
border-left:1px solid #bbb;}

li a {
display:inline-block;
color: black;
padding: 8px;
font-family: julius sans one ;
text-decoration: none;
text-align: center; 
}

a:hover:not(.active) {
background-color: silver; }

.active {
    background-color: silver;
}

h1 {
font-family: Ewert;
color: green; 
font-size: 50px;
position: relative;
top: 10px;}

h2 {
position:relative;
bottom: 10px;
font-family: great vibes;
font-size: 60px;}

p {
position: relative;
bottom: 50px;
text-align: center;
text-shadow: white;}

#slika1 {
background: url("http://globalmedicalco.com/photos/globalmedicalco/26/126088.jpg");
background-repeat: no-repeeat;
background-size: auto; }