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!
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
Yuqi Feng4,686 Points
Why is the container max-width 46rem? Why 46? What is the route em here? Why should it be rem rather than em here?
With large screens, why is the container max-width 46rem? Is 46 calculated? How? Rems are relative to the route em, set to the html. So what is the route em here? Why should it be rem rather than em here? I feel I am missing something here... Any response would be much appreciated. Thanks!
Austin Whipple29,725 Points
The root em (the HTML element) font size defaults to 16px unless otherwise defined in your CSS files or the client's browser settings. So that would be 736px (16 * 46). That dimension was probably chosen as the max width for very large screens because it would maintain a reasonable column width for readability (very wide columns of text can be very hard to read efficiently).
As to why it would be rem rather than em, it usually depends on the use case. If you use rem, it is locked to the root element's font size. When you choose em, it can be influenced by the font size settings of any container elements. So, for instance, if you decided to adjust the font size of the <body> element to 12px, then you've also suddenly changed the width of your main text column. In some cases this can be a good thing, but is often bad when dealing with important, meant-to-be-stable layout elements.