Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Faruk Suljagic
Faruk Suljagic
300 Points
Posted by Faruk Suljagic
Faruk Suljagic
300 Points

flexbox

I am making basic layouts with more boxes, currently i applied 3 boxes as such: <div class="firstheader"> <div class="onethird1"> ONE THIRD </div> <div class="onethird2"> ONE THIRD </div> <div class="onethird3"> ONE THIRD </div> </div>

all is good until i apply max-width and everything moves to the left. I dont want that because there is enough space for all three boxes to fit. Basically i put max-width: 90% and put the "tag" flex: 30%; for all three boxes. Help

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Hey there, it would help to see all of your code in a better format such as Markdown, you can see examples below how to include it in your question below. This will allow others like myself have better readability and an understanding on how your code works.

1 Answer

Eric Butler
Eric Butler
33,512 Points

Hey there Faruk, I'm not sure if this is what you mean, but I wonder if the cause of your content "moving to the left" is due to the max-width you're applying. Try the code below and see if it helps you figure out your issue:

You said your HTML is like:

<div class="firstheader">
  <div class="onethird1"> ONE THIRD </div>
  <div class="onethird2"> ONE THIRD </div>
  <div class="onethird3"> ONE THIRD </div>
</div>

So your CSS is something like:

.firstheader {
  display: flex;
  max-width: 90%;
  margin: auto; /* if you add auto margin, your header will center horizontally and won't "move left" */
}
.onethird1,
.onethird2,
.onethird3 {
  flex: 30%;
  border: 1px solid gray; /* add this to help debug, so you can see more clearly what's happening */
}
Faruk Suljagic
Faruk Suljagic
300 Points
Faruk Suljagic
Faruk Suljagic
300 Points

Yeah that was in fact the problem only i set the max width to 80% and margin: 0 auto; Thank you

Eric Butler
Eric Butler
33,512 Points

Excellent! Glad you figured it out.