How to change the position of the text in a HTML element?

November 23, 2024

I am making a navigation bar in my website and I realized the text is just too close to the edge of the buttons. How can I fix this?

Here is the code I used:

.sections {
  height: 75px;
  width: 500px;
  background-color: #18148b;
  line-height: 75px;
  margin-bottom: 5px;
  color: white;
}

#sectionList {
  background-color: #131067;
  height: 100%;
  width: 500px;
}

<div id="sectionList">
  <ul id="list" style="list-style-type: none; margin: 0; padding: 0;">
    <li id="section1" class="sections">Section1</li>
    <li class="sections">Section2</li>
  </ul>

>Solution :

just add CSS:

ul#list > li {
  box-sizing   : border-box;
  padding-left : 1.5em;
  }

.sections {
  height           : 75px;
  width            : 500px;
  background-color : #18148b;
  line-height      : 75px;
  margin-bottom    : 5px;
  color            : white;
  }
#sectionList {
  background-color : #131067;
  height           : 100%;
  width            : 500px;
  }
ul#list > li {
  box-sizing   : border-box;
  padding-left : 1.5em;
  }

<div id="sectionList">
  <ul id="list" style="list-style-type: none; margin: 0; padding: 0;">
    <li id="section1" class="sections">Section1</li>
    <li class="sections">Section2</li>
  </ul>
</div>