Why is text not responding to padding?

Question

Vue.js

Good afternoon, there is such code in the vue component:

<div class="todo-list" v-for="todoList in todos">
            <h2 class="todo-name">{{ todoList.name }}</h2>
            <p class="create-todo">Новое задание</p>
            <p class="todo" v-for="todo in todoList.list">{{ todo }}</p>
  </div>

  // стили
  text-align: center
  padding: 12px 5px

Padding works, but when the width goes to the minimum, the text slides to the right:

Does anyone know how to fix this?

Answer 1

It's more word-wrap than padding