Single-post pages adopting margins from theme CSS


I'm have a bit of trouble with the single-posts pages for my clients website Lee Christian Law Blog

The page is currently updated to WP 4.7, and was built using the Beaver Builder Plugin, theme and child theme.

If you click on the only post on the blog and go to the single post page, you'll notice that the content is hidden up underneath the header menu. This is because of the styling I've done for the menu on the rest of the site. This CSS I've written for this is as follows:

@charset "utf-8";
/* Move the page content up to cover the header */
/* Sized for default small device breakpoint of 768 px - change this value if you have a custom breakpoint */
@media (min-width: 768px) {
  .fl-page-content {
     margin-top: -182px; /*Adjust depending on the height of the header for large devices*/
/* Stack the header on top of the content and make the background transparent */
  .fl-page-header-primary {
     position: relative;
     z-index: 3;
     background: none;
/* For large screens, change the margin-top value to accommodate the narrower heading */
@media (min-width: 992px) {
  .fl-page-content {
    margin-top: -135px; /*Adjust depending on the height of the header for large devices*/

Instead of styling each individual single-post page with a separate header, I was hoping to do a one-all fix so that the styling of all single post pages are the same, i.e. the content fits underneath the header. I would also like the menu for all single post pages to have the default background color (dark blue : #161b33) I am assuming that all that needs to happen is that the page content needs to be pulled down with margins but the header (for the single-post page only) needs to have separate margins so it doesn't get pulled down with the page content.

I've tried to fix this with some CSS that I've either google, or searched through forums for but to no avail! I just can't figure it out, even though I've sure it's quite simple. The closest I've got is styling the single-post css to have a 'margin-top', which seems like it would work perfectly and even give me the dark blue background for the menu, except that it pulls the header menu down with it as shown in the attached picture...

Thanks in advance for the help!