alignment issue on bootstrap page

I have the following page that is using Bootstrap 3.x, It's not currently using media queries, but I expect to implement them soon, thus the reason why I'm using BootStrap.

I'm currently trying to get the different sections of the content to align up properly, but am having trouble doing so. The page is essentially composed of 3 horizontal sections:

1) banner section, section with the dark green background
2) nav section - section with the light green background and nav menu items
3) content section - includes the logo in column 1, and 2 side by side boxes that contain the main content of the page

what I'm looking to do is line up the left margins, so that the text in the (ExchangeTree) in the banner section left aligns the the first menu item (Home) which then aligns up to the left border of the left content box.

I've tried playing around with the different "col" classes in BS but nothing seems to work. I'm hoping to accomplish without putting the banner and nav sections in their own BS "row", I believe I tried that and it screwed up my menu. If that's the only solution, I'll do it, but want to explore other options as well.

I'd prefer to this via CSS but am not opposed to using javascript/jquery to do the calculations.


LVL 34
Big MontyWeb Ninja at largeAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The outer box of #1 and #2 actually do align.  The reason your nav does not align is because you have it nested a few times over. Each of those could have some padding or margin.  div.container-fluid .verticalCenter has 15px and the 2nd div below that with id #bs-example-navbar-collapse-1 has another 15px.  Keep looking for padding and margin in those nested div's. I saw border colors spec'd meaning you could have boarders as well and those take up space too.

The reason #1 and #2 don't match up with #3 is because you have div#xtCol1 set to col-sm-3 where the leftmost columns of #1 and #2 are set to col-sm-2.  Start by making div#xtCol1 set to col-sm-2.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big MontyWeb Ninja at largeAuthor Commented:
thx for the advice, I'll have a go at it probably tonight and report back
Big MontyWeb Ninja at largeAuthor Commented:
removing the specified width on xtCol1 and adding padding-left: 0px to each of the nested divs seems to have resolve the alignment issue

thx again for pointing me in the right direction
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.