Почему ul влияет на заполнение h2

Question

.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>

Я не уверен, почему список вытаскивает фон заголовка раздела

Answer 1

потому что вы использовали 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>

Answer 2

ul не влияет на h2.

Ваш фон h2 контролируется двумя отступами на .section-title css. Вы не говорите точно, чего пытаетесь достичь, но, например, если вы удалите эти отступы, h2 будет выровнен по левому столбцу, а фон будет находиться только за словом software и не будет простираться с обеих сторон.

Если вы хотите настроить интервал без расширения фона, вы можете использовать поля на .section-title.