Margin-top doesn't work right

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

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

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