Can't move element away from other elements in HTML file? - html

Question

At the bottom of this page http://kimcolemanprojects.com/cyanotype-hats.html there is a section with the title "Related Projects".
I can't move this title down from the grid of images above. I think there must be an error in the Html structure, but I can't find it. I have given the element padding and margin but it still will not move.
This is a section of the html code from that page:
<div class="container">
<div id="header">
<h1>KIM COLEMAN PROJECTS</h1>
<div id="nav">
<ul>
<li id="work">
Work
</li>
<li id="about">
About</li></ul>
</div><!--end nav-->
</div><!--end header-->
<div class="main-individual">
<!-- grid of Work -->
<a rel="hats" href="images/hats/velour 2.jpg" class="fancybox" data-title-id="title-5">
<div class="view view-sixth">
<img src="images/hats/small-velour 2.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Velour trilby with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-5" class="hidden">
Velour trilby with Cyanotype ribbon</div>
<a rel="hats" href="images/hats/balaclava.jpg" class="fancybox" data-title-id="title-1">
<div class="view view-sixth">
<img src="images/hats/small-balaclava.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Balaclava with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-1" class="hidden">
Balaclava with Cyanotype ribbon.
</div>
<span class="similar"><h6>Related Projects</h6></span>
<a href="unique.html" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/uniques.jpg" />
<div class="mask-small">
<div class="mask-text">
<h2>Unique</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/glare.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Glare</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/act_natural.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/act-natural-glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Act Natural Glare</h2>
</div>
</div>
</div></a>
</div>
</div>

Answer 1

You could reduce the margin in the .view-small class, e.g. to margin: 20px 2%. Is this what you meant?
Update: Try to set the line-height: 30px; in .similar class. This moves the title down to the small images.