Margin-top doesn't work right - html

Question

I want to make the top margin of a h2 class bigger then it is now. I tried applying margin-top and padding, but they both didn't work. When i use margin-top on the h2portfolio class, the margin-top of section 1 (so a totally different section) changes.
U can see this on interlaser.webovo.nl. I need to change the margin of the orange 'Portfolio' h2, so class "h2portfolio".
The html i used to build that section:
<h2 class="h2portfolio">Portfolio</h2>
<div id="portfolio1">
<h2 class="h2portfolio1">Feesten</h2>
<img class="portfolio1"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg">
</div>
<div id="portfolio2">
<h2 class="h2portfolio2">Kunst</h2>
<img class="portfolio2"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg">
</div>
<div id="portfolio3">
<h2 class="h2portfolio3">Overige</h2>
<img class="portfolio3"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg">
</div>
the css i used:
.h2portfolio {
background-color: white;
text-align: center;
color: #F16C20;
}
#portfolio1 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio2 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio3 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
.portfolio1 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio2 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio3 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}

Answer 1

I have made the updates in the answer.
1 : make a separate div for lazershow contents
2 : make a separate div for portfolio title & its contents and then give margin(as per your need) to the portfolio div which satisfy your requirements.
.lazershow{
background:white;
height:200px;
}
.portfolio_div{
border:thin black solid;
}
.h2portfolio {
background-color: white;
text-align: center;
color: #F16C20;
margin-top:10%; /*Give margin as per your need*/
}
#portfolio1 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio2 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio3 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
.portfolio1 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio2 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio3 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
<div class="lazershow">
LazerShow Div
</div>
<div class="portfolio_div">
<h2 class="h2portfolio">Portfolio</h2>
<div id="portfolio1">
<h2 class="h2portfolio1">Feesten</h2>
<img class="portfolio1"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg">
</div>
<div id="portfolio2">
<h2 class="h2portfolio2">Kunst</h2>
<img class="portfolio2"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg">
</div>
<div id="portfolio3">
<h2 class="h2portfolio3">Overige</h2>
<img class="portfolio3"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg">
</div>
</div>
I have given margin-top to h2portfolio class.
Here is JSFiddle
Hope this helps.

Answer 2

Just Add margin-top: 100px; and padding-bottom:15px; style in .h2portfolio class as you need.
.h2portfolio {
background-color: white;
text-align: center;
color: #F16C20;
margin-top: 100px;
padding-bottom:15px;
}
#portfolio1 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio2 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio3 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
.portfolio1 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio2 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio3 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
<h2 class="h2portfolio">Portfolio</h2>
<div id="portfolio1">
<h2 class="h2portfolio1">Feesten</h2>
<img class="portfolio1"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg">
</div>
<div id="portfolio2">
<h2 class="h2portfolio2">Kunst</h2>
<img class="portfolio2"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg">
</div>
<div id="portfolio3">
<h2 class="h2portfolio3">Overige</h2>
<img class="portfolio3"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg">
</div>

Answer 3

Just add to your class ".h2portfolio":
.h2portfolio {
background-color: white;
text-align: center;
color: #F16C20;
margin-top: 100px;
padding-bottom:15px;
//line new added
float: left;
width: 100%;
margin-top: 100px;
}