Horizontal space between header and text

How do I reduce the amount of space between my header and the first line of text?
(See sunbeltatlantic.ca). The spacing on the home page is right but not on my other pages.
Thanks!

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

#content.page-wrap {
    padding-top: 5px !important;
}

Regards,
Kharis

@kharisblank, I still can’t get it to work. It is correct on the front page but not on the other pages. There is something in the CSS I am missing. Here is my Custom Additional CSS:

  .page > .entry-header {
  	display: none;
  }

  h1 {
  	font-size: 4.3rem;
  }

  h1, h2, h3 {
  	color: #346698 !important;
  }

  h5 {
  	margin: 0.75em 0;
  }
  .site-header {
  	padding: 0;
  }
  blockquote {
      color: #20507C !important;
      background: #EDF1FA !important;
  }

  .btn {
    border: none; /* Remove borders */
    color: white; /* Add a text color */
    padding: 14px 28px; /* Add some padding */
    cursor: pointer; /* Add a pointer cursor on mouse-over */
  }

  .team {background-color: #20507C;} /* dark blue */
  .team:hover {background-color: #EDF1FA;} /* light blue */

  .site-logo, .header-wrap .col-md-4 {
  	margin: 1em 0;
  }

  .header-info {
  	padding: 1em;
  	background: #346698;
  	color: white;
  	font-weight: 600;
  	overflow: hidden;
  }

  .header-info a {
  	color: white;
  }

  .header-info a:hover {
  	color: #ffcb66;
  }

  .header-info i {
  	padding-left: 0.5em;
  	font-size: 2rem;
  }

  .header-info span {
  	padding-left: 0.5em;
  }

  .btn-menu {
  /* 	display: none; */
  }

  #mainnav {
  /* 	display: none; */
  }

  .header-image {
  	margin: 0 auto;	
  }
  #content.page-wrap {
      padding-top: 5px !important;
  }

  .content-area .hentry {
  	padding-bottom: 0;
  }

  .panel-grid-cell .widget-title  {
  	text-transform: none;
  }

  .sidebar-button {
  	margin-bottom: 10px;
  }

  .single .single-meta {
  	display: none;
  }
  .team-pop a {
  	color: white !important;
  }

  .name a:hover {
  	color: #ffcb66;
  }

  .content-logo {
  	display: block;
  	margin: 0 auto;
  	float: initial;
  }

  @media screen and (min-width: 825px) {
  	.content-logo {
  		margin-right: 3.5em;
  		float: left;
  	}
  }

  @media screen and (min-width: 992px) {
  	.header-image {
  		max-width: 970px;
  		height: 400px;
  	}
  }
  @media screen and (min-width: 1200px) {
  	.header-image {
  		max-width: 1170px;
  		height: 470px;
  	}
  }

  .page-wrap .content-wrapper {
  	background-color: #f7f7f7;
  }

  .content-area .hentry:after {
  	width: 100%;
  }

  .entry-header {
  	text-align: center;
  }

  .post-cat {
  	display: none;
  }

  .main-nav-container {
  	background: #346698;
  }

  .menu-item > a {
  	padding: 2rem 0;
  }

  @media only screen and (min-width: 1025px) {

  	.logo-container {
  		position: absolute;
  		left: 0;
  		top: 100%;
  	}


  	.admin-bar .site-header,
  	.admin-bar .site-header.float-header {
  		top: 0;
  	}

  	.site-header,
  	.site-header.fixed {
  		position: relative;
  	}
  }

  @media only screen and (max-width: 1024px) {
  	#mainnav-mobi {
  		margin-top: 0;
  	}

  	.btn-menu {
  			position: relative;
  			height: 50px;
  			display: block;
  			width: 100%;
  	}

  	.btn-menu_copy {
  		font-family: "Raleway", sans-serif;
  		font-size: 0.7em;
  		vertical-align: middle;
  	}
  	
  	.btn-menu:after {
  		    left: 1rem;
      position: relative;
  	}
  	
  }

Hello there,

To help me avoid confusion and go to wrong direction, please take some screenshots and share them here.

Regards,
Kharis

Hi there,
We found the solution. Had to edit the SiteOrigin Widget and change the margins within the widget. The problem was not in the custom CSS.
Thanks for your help!