Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Brandon Brigham
Brandon Brigham
3,716 Points

Fix header of website

Hello,

Please check out the site I'm working on:

http://087.33c.myftpupload.com

The header value prop: "Let us maximize your investment income and minimize expenses."

is below the logo and I need it flush with the logo on the left. Please advise, thanks!

Steven Parker
Steven Parker
215,954 Points

The phrase appears to be aligned with the left edge of the logo now.

Could you provide a mock-up image showing how you want it to appear?

And including your code would be nice as well. :wink:

2 Answers

Steven Parker
Steven Parker
215,954 Points

I see it the same way, but you described what you wanted as "flush with the logo on the left". But now that I see the photo, I think you meant to say "flush with the logo at the top".

You still didn't provide any code, but I peeked with devtools. Wow — you've got a wild mix of things going on there, including floated flex items! That's a combination I don't think I could keep straight myself.

But the main issue here is that your message is just too wide to fit beside the logo considering the constraint imposed by the container they share. You've got a rule for ".fusion-header-wrapper .fusion-row" that sets "max-width: 1100px;". Eliminating that limit would fix it, but only for windows larger than 1390px.

Other possible solutions might be to constrain the .fusion-header-banner size to make it fit beside the logo (and the text wrap), use a smaller logo image, or use a smaller font.

I notice that in your mock-up the logo is definitely smaller.

Brandon Brigham
Brandon Brigham
3,716 Points

Hey Steven how's it goin'? =)

So I'd like it to look like this:

alt text

Right now according to two other computers it looks like this:

alt text

Which version do you see?