Defining width of page in section, rather than in body-CodePudding

I want my page to have a fix width, lets say 1440px. I usually put width in body and it applies to all elements. In my new project I need to have one section in white background, width being fixed makes it so that only 1440px is white. I managed to solve this by removing width from body and creating a class:

.width-fix {
  width: 144rem;
  margin: 0 auto;
  padding: 0 1.2rem;
}

I set that class as additional to every section I don't needed colored.

Is this the right way to solve it or is there something better? Currently it works like a charm.

I started learning HTML/CSS 2 weeks ago, sorry if its dumb question

**Edit: Image for clarification

CodePudding user response：

Yes, usually I work with a classname like container or section for all the most general default styling. Every element is packed in a section which holds the right background-color and has a div with container for the right width and margins and padding.

So something like this:

  .block {
 background-color: green;
 }
 .container {
 max-width: 1440px;
 margin: 0 auto;
 padding: 25px;
 }
 <section >
 <div >
 
 </div>
 </section>