Navigation and Footer alignment in purchased template

[Jlawal]

Hello,

I am having some issues with the alignment of my navigation and footer.

This is the page in question and this is how it should look (centered).

Any help would be greatly appreciated.

Thanks,

Jamila

[Jsum · Accepted solution]

Hey @Jlawal,

Your page center styling disappeared.  I know you had it before, maybe you need to switch to an older revision of your css?

@jestlinbaum,  hubspot's css sets a float and a left margin on it column wrappers. margin: 0 auto !important; won't reset the margin-left: 0 !important; that is set by Hubspot. What I always do is:

page-center {
    float: none !important;
    margin-left: auto !important;
    margin: 0 auto;
}

that ensure that the float is overwritten and also the margin left. 

[Jlawal]

Hi @Jsum

Thank you for replying! I have two stylesheets attached to this page:

• Custom/system/css/Ebiz-styleDevelopers_page.cssx
  and
• Custom/page/Groupcall-Nov2015-theme/Groupcall_header_and_footer_styles.css

The 1st is the templates stylesheet and the 2nd one is the header and footer styling taken from our websites main stylesheet. Is it the 2nd one that needs the page-styling or has it been removed from the 1st stylesheet?

Many thanks,

Jamila

[Jsum]

@Jlawal,

The page is looking right now so you must have done something to fix it. 

When I went to the page before, used the inspector, and chose the page center wrapper around the header, and then the footer, there were no styles set to center it. I couldn't really say if or why the stylesheets were not applying the code to the wrapper around your header and footer. It looks like it is working now though. 🙂

[Jlawal]

@Jsum

You're right! I wish i could take credit for it but i don't think it was me!

The fairies must have done it haha.

Thank you again - your input is always appreciated!

[Jsum]

Anytime!

[jestlinbaum]

@Jsum,

Noted. Thank You!

[jestlinbaum]

For the header, i think you just need to modify this css:

.header-container .page-center {
    max-width: 1150px !important;
}

to include:

.header-container .page-center {
    max-width: 1150px !important;
    margin: 0 auto!important;
    float: none;
}

and for the footer, it looks like you have a bunch of divs nested inside each other with the class of .footer-container . You may want to look into that. However,  your inner-most nested .footer-container has inline styling of width: 970px;. You should be able to add the margin and float properties to that as well.