I have problem to change background color in Angular component. My html code:

<section >
<div >
  <div >
    <div >
      <div >
        <div  style="border-radius: 15px;">
          <div >
            <h2 >Login</h2>

            <form>

              <div >
                <input type="email" id="form3Example3cg"  />
                <label  for="form3Example3cg">Enter email...</label>
              </div>

              <div >
                <input type="password" id="form3Example4cg"  />
                <label  for="form3Example4cg">Enter Password...</label>
              </div>


              <div >
                <button type="button"
                  >Login</button>
              </div>

              <p >Haven't an account? <a [routerLink]="['/registration']"
                  ><u>Registration here</u></a></p>

            </form>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</section>

if i add class to "section" and change background color I have this: Image

Please tell me how to change the background color of the entire page

Second error: Helped Padding

CodePudding user response：

you can change the background color of a component by adding a class to a components css using :host, this targets the most top most div so if you want to change the background of the whole component youll have to add a full height and display property as u like

:host{
  display:block;
  background:red;
  height:100%;
}

CodePudding user response：

Change <section > to <section >.

UPDATE

It's not padding, but max-width set to some element. Use Inspect Element and find an element which has set max-width.