I have a issue about the margin and display in my assignment-CodePudding

I am confused by the margin when I write the code:

Section {
  background-color: #FFFFFF;
  width="100%";
}

p1 {
  font-family: Roboto;
  font-size: 22px;
  font-height: 1px;
  margin-top: 45px;
  margin-left: 165px;
}

p2 {
  font-family: Roboto;
  font-size: 22px;
  font-height: 1px;
  margin-top: 10px;
  margin-left: 165px;
}

<section>
  <p > Content 1 </p>
  <p > Content 2 </p>
</section>

However, when I don't add the display, the background in section will not cover all the content. when I add the display: inline-block, it will cover but it will have the same first situation when I change display:inline-block to display: inline or display:block. So everyone can explain me what is happening please?

CodePudding user response：

Add overflow:auto or overflow:hidden or overflow:scroll.

section {
    background-color: red;
    width: 100%;
    overflow:auto; // added
}
.p1 {
    font-family: Roboto;
    font-size: 22px;
    margin-top: 45px;
    margin-left: 165px;
}
.p2 {
    font-family: Roboto;
    font-size: 22px;
    margin-top: 10px;
    margin-left: 165px;
}

<section>
  <p > Content 1 </p>
  <p > Content 2 </p>
</section>

CodePudding user response：

The only issue is with you misused the double quotes in the width property of your section CSS, also the class selectors in your css haven't started with ".", so just update your css it will definately work.