Sun. Oct 1st, 2023

[ANSWERED] html – Why does the ul affect the h2 padding

By

Nov 19, 2022 css, html

Solution 1 :

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>

Solution 2 :

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.

Problem :

.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

By

Related Post

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022