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
Jonmarc Stevens
6,414 PointsSpacing between boxes
Hey everyone, currently I'm working on a template for a friend's website that I'm creating but I'm having problems with making a row of boxes centered and responsive.
I have a row of 4 boxes that I would like to center in one row and no matter how far the screen stretches it will still be centered.
.box1, .box2, .box3, .box4{ background: #438fbc; min-width: 40%; height:150px; display:inline-block; margin-top:20px; margin-left: 5%; } please let me know if you need anymore info and I'll gladly inform you. Thanks again
1 Answer
Jake Lundberg
13,965 PointsAre you trying to have the 4 boxes expand the entire width of the screen? If so, then you can simply do:
.box1, .box2, .box3, .box4 { width: 20%; margin: 0 2.5%; }
This would make each of your boxes evenly spaced across your screen. *note: you will need to be mindful of the margin and padding of the containing element.
If the boxes are not intended to span the width of the screen, then you can simply use text-align: center on the element that contains all your boxes. This will center them within the element, and then you can make you boxes as wide as you want.
Hope this helps!
Jonmarc Stevens
6,414 PointsJonmarc Stevens
6,414 PointsMan you are a life saver!! Thanks again! Yeah it was bugging me for a while. I've always had difficulties working on boxes in layouts and fixed positioning. Thanks again!!!