When we started applying these Styles webflow created a class here called heading and if we apply that same class to another element like this paragraph then they'll both
share the same Styles and any changes we make here say to font size or anything
else will affect all elements that have that class applied.
So let's remove that class from our paragraph and what we can do here is name this in a way that we know it can be reused because we're going to use this heading style across multiple sections usually we name elements based on the section that they're in, like this is the hero section this is our content section but this class we want to make sure that we can use it in any section.
So the most common way to do that is to start with U Dash and U stands for utility it's a utility class that can be used anywhere on the site so this is our utility for heading. Let's also go ahead and create a class for our container so all of our containers throughout the site share the same style they have a Max width of 1440 pixels and they also have some padding on the side and a little bit more padding on the top and bottom so we can go ahead and create a class on this we'll call it something like U container and let's give it a Max width of 1440 and we'll divide it by 16 RM so that is a Max width of 90 REM
If we were to preview this from a larger screen size like let's say a 1920 screen we'll see the container isn't going edge to edge it has to stop scaling at this maximum width and for the left and right padding we're going to do 2.5 REM and if we hold the option key and hit enter it'll apply across both sides and for the top and bottom padding we'll do six Rim hold option and hit enter and it applies across top and bottom.
