my h3 element is stuck too close to the header.

Question

My h3 elements in both my 'about' and 'contact' pages are stuck too close to the green header that I have. I've tried to adjust the css for section/h3 but they ended up creating a white space on top of the header. 
Below is my main.css file:
'''css
/******************************
GENERAL
******************************/
body {
  font-family: 'Open Sans', sans-serif;
}  
wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}
h3 {
  margin: 0 0 0;
}
/******************************
HEADING
******************************/
header {
  float: left;
  margin 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}  
logo {
  text-align: center;
  margin: 0;
}
h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}
h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}
/******************************
NAVIGATION
******************************/
nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}
nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}
nav li {
  display: inline-block;
}
nav a {
  font-weight: 800;
  padding: 15px 10px;
}
/******************************
FOOTER
******************************/
footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}
.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}  
/******************************
PAGE: PORTFOLIO
******************************/
gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}
gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}
/******************************
PAGE: ABOUT
******************************/
.profile-photo {
  display: block;
  max-width: 150px;
  margin: 30px auto 30px;
  border-radius: 100%;
  padding: 30px;
}
/******************************
PAGE: CONTACT
******************************/
.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}
.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 10px 0 10px;
}
.contact-info li.phone a {
  background-image: url('../img/phone.png');
}
.contact-info li.mail a {
  background-image: url('../img/mail.png');
}  
.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}  
/******************************
COLORS
******************************/
/* site body */
body {
  background-color: #fff;
  color: #999;
}
/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}
/* nav bg on mobile */
nav {
  background: #599a68;
}
/* logo text */
h1, h2 {
  color: #fff;
}
/* links */
a {
  color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
  color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
'''
I'd appreciate it if you can help me!

Welcome to the Treehouse Community

Looking to learn something new?

Safira Nugroho

Safira Nugroho

my h3 element is stuck too close to the header.

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

Raymond Rowe

Raymond Rowe