I'm trying to increase the top margin of an h2 class, specifically for the 'Portfolio' section on my website. I've attempted to use margin-top and padding properties, but they haven't produced the desired effect. Strangely, when I apply margin-top to the h2portfolio class, it impacts the margin of a completely different section (section 1).
You can observe this issue on the interlaser.webovo.nl site. I need to adjust the margin of the orange 'Portfolio' h2 element, which belongs to the "h2portfolio" class.
Here is the HTML code I used to construct that particular section:
<h2 class="h2portfolio">Portfolio</h2>
<div id="portfolio1">
<h2 class="h2portfolio1">Feesten</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio1"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio2">
<h2 class="h2portfolio2">Kunst</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio2"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio3">
<h2 class="h2portfolio3">Overige</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio3"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
And here is the CSS styling I applied:
.h2portfolio {
background-color: white;
text-align: center;
color: #F16C20;
}
#portfolio1,
#portfolio2,
#portfolio3 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
.portfolio1,
.portfolio2,
.portfolio3 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}