CODEWITHSUNDEEP
htmlcss
Josh-H265
Josh-H265

Reputation: 1

Why does the ul affect the h2 padding

.section-div {
  margin: auto;
  padding: 50px;
}

.section-title {
  text-align: center;
  font-size: 140%;
  font-family: 'Kanit', sans-serif;
  background: rgb(124, 124, 124, 0.5);
  padding-left: 15%;
  padding-right: 115%;
}
<div class="section-div">
  <h2 class="section-title">software</h2>
  <ul>
    <li>testingggg</li>
  </ul>
</div>

I am unsure as to why the list is dragging the section title background out

Upvotes: 0

Views: 99

Answers (2)

colonelclick
colonelclick

Reputation: 2215

The ul has no effect on the h2.

Your h2 background is controlled by the two paddings on the .section-title css. You do not say exactly what you are trying to achieve but, for example, if you remove those paddings, the h2 would align to the left column and the background would only be behind the word software and not extending on either side.

If you want to adjust the spacing without extending the background, you can use margins on .section-title.

Upvotes: 0

DCR
DCR

Reputation: 15657

because you used padding_right:115%

<div class="section-div"> 
                <h2 class="section-title">software</h2>
                <ul>
                    <li>testingggg</li>
                </ul>
            </div>
.section-div{
    margin:auto; 
    padding: 50px;
}

.section-title{
    text-align: center;
    font-size: 140%;
    font-family:'Kanit', sans-serif;
    background: rgb(124, 124, 124, 0.5);
    padding-left:15%;
    padding-right:15%;
    }
    
  
<div class="section-div"> 
                <h2 class="section-title">software</h2>
                <ul>
                    <li>testingggg</li>
                </ul>
            </div>

Upvotes: 1

Related Questions