I go into all this in The “Inside” Problem. The gist: you want an edge-to-edge container, but the content inside to have a limited width. I think there is absolutely no problem using a nested element inside, but it’s also fun to look at the possibilities of making that work on a single element.
My favorite from that article is this one that calculates padding for you:
While calc() does indeed do the trick, it doesn’t allow you to have a minimum padding. Well, max() does. I still find it hella confusing that we reach for max() when we want a minimum value but, hey, just gotta build that muscle memory.
Reader Caluã de Lacerda Pataca responded to our last newsletter where we mentioned these functions with a this clever idea:
Now we can make sure that the content doesn’t smash up against the edges no matter what.
