I made it more compact and replaced floats with inline-blocks.
If you wonder why there are font-sizes and margins with both px and rem… px are fallback for browsers that don’t support rem. Default font-size on all modern browsers is 16px, so 1rem = 16px. rem = html element font-size.
rem is being used because I used the zero font-size trick to remove white space between the inline-blocks. I also used
white-space: nowrap; to make it impossible for the tree to break into pieces (like it does with floats).
Also, don’t use viewport meta tag in this case unless you see the trouble to add media queries to resize the tree appropriately for all the target screen sizes. If you do see that trouble then you can use meta tag with device-width and initial-scale of 1, which is the only meta tag you should use on responsive sites.