Float and margin CSS - html

Question

I've created five different sections of images, displayed just as you can see in jsfiddle, the problem is that I can't control the margin of these imagesections. The thing is that I'm trying to add some space between section 1, 2, 3, 4 and 5, but whenever I add the margin the section just refuse to move.
I've tried to reset the float with the codes:
clear:both;
and
float: none;
but without success. The result of those codes is just that the section jumps to a new line.
The fiddle: https://jsfiddle.net/p0eaxkpz/

Answer 1

I found your problem, there is an error in your code: margin-left:0,5%; should be margin-left:0.5%;
Here is your updated jsfiddle
I have simply added margin: 0; padding: 0; to all elements, you can see it's working well. Basically, there is no need for you to wrap the images with <section> tags.

Answer 2

I also got a more modular aproach
#charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body
{
background-color:black;
width:100%;
height:100%;
padding-bottom:20%;
}
#wrapper
{
width:80%;
height:1000px;
background-color:white;
margin:auto;
}
#headerloga
{
float:left;
width:20%;
height:20%;
font-family: "Gotham Medium";
font-weight:800;
font-size:40px;
padding-top:10%;
padding-left:10%;
}
#menu
{
float:left;
width:60%;
height:auto;
font-family:"Gotham Medium";
font-size:15px;
padding-top:17.5%;
padding-left:10%;
}
ul {
float: left;
width: auto;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: left;
width: auto;
text-decoration: none;
color: black;
padding: 0.2em 0.6em;
}
a:hover {
color:#ED1C91;
}
li {
display: inline;
}
#imageshosting {
background-color:#CCC;
width:60%;
height:80%;
position:absolute;
clear:both;
top:40%;
left:18%;
}
.img-hosted {
display:block;
position:relative;
float:left;
height:49%;
margin:0.5%
}
.w33 {
width:32.33%;
}
.w66 {
width:65.66%;
}
.img-nextline {
clear: both;
}
#foot {
background-color:#666;
clear:both;
position:absolute;
top:120%;
left:18%;
width:60%;
height:10%;
}
<div id="wrapper"><!-- Webpage wrapper-->
<div id="headerloga">
Test
Test2
<section style="color:#ED178C; ">Test3 </section>
</div>
<div id="menu"><!--Menu-->
<ul>
<li>KUNDER</li>
<li>GAMLA FAVORITER</li>
<li>OM OSS</li>
<li>KONST</li>
<li>KONTAKT</li>
</ul>
</div><!-- End of menu-->
<!-- images starts-->
<div id="imageshosting">
<img class="img-hosted w33" src="images/testimage1.jpg"/>
<img class="img-hosted w33" src="images/testimage2.jpg"/>
<img class="img-hosted w33" src="images/testimage3.jpg"/>
<!-- New image line -->
<img class="img-hosted w66 img-nextline" src="images/testimage4.jpg"/>
<img class="img-hosted w33" src="images/testimage5.jpg"/>
</div><!--Imageshosting ends-->
<!--Footer here-->
<div id="foot">
<p>Hello</p>
</div>
</div><!-- End of webpage wrapper-->