How do I get my pargraph to line up on top with my div container?

Question

So I am making a skills bar, that I want to use for my website. But the text like html,css etc isn't lining up with my bars. (These aren't my real % am a beginner in html and css) Feel free to change anything that you think is necessary. Below is my html and css.

.skills h1 {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-family: 'Raleway', sans-serif;
}

.container-skill {
  box-sizing: border-box;
  width: 40%;
  background-color: #ddd;
  margin-left: auto;
  margin-right: auto;
}

.skill {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.skills p {
  margin: 0.1%;
}

.html {
  width: 90%;
  background-color: #4CAF50;
}

.css {
  width: 80%;
  background-color: #2196F3;
}

.js {
  width: 65%;
  background-color: #f44336;
}

.php {
  width: 60%;
  background-color: #808080;
}

.skill-box {
  margin-left: auto;
  margin-right: auto;
}

<div class="skills">
  <h1>Skills</h1>
  <div class="skill-box">
    <p>HTML</p>
    <div class="container-skill">
      <div class="skill html">90%</div>
    </div>

    <p>CSS</p>
    <div class="container-skill">
      <div class="skill css">80%</div>
    </div>

    <p>JavaScript</p>
    <div class="container-skill">
      <div class="skill js">65%</div>
    </div>

    <p>PHP</p>
    <div class="container-skill">
      <div class="skill php">60%</div>
    </div>

  </div>

</div>

Feel free to change anything that you think is necessary. This just extra text as I can.

Answer 1

You can set the width of your paragraphs to 40% to match the divs, and change the margin to also match:

.skills h1 {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-family: 'Raleway', sans-serif;
}

.container-skill {
  box-sizing: border-box;
  width: 40%;
  background-color: #ddd;
  margin-left: auto;
  margin-right: auto;
}

.skill {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.skills p {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.html {
  width: 90%;
  background-color: #4CAF50;
}

.css {
  width: 80%;
  background-color: #2196F3;
}

.js {
  width: 65%;
  background-color: #f44336;
}

.php {
  width: 60%;
  background-color: #808080;
}

.skill-box {
  margin-left: auto;
  margin-right: auto;
}

<div class="skills">
  <h1>Skills</h1>
  <div class="skill-box">
    <p>HTML</p>
    <div class="container-skill">
      <div class="skill html">90%</div>
    </div>
    <p>CSS</p>
    <div class="container-skill">
      <div class="skill css">80%</div>
    </div>
    <p>JavaScript</p>
    <div class="container-skill">
      <div class="skill js">65%</div>
    </div>
    <p>PHP</p>
    <div class="container-skill">
      <div class="skill php">60%</div>
    </div>
  </div>
</div>