Как растянуть линию, линии?

.procent li {
  margin-bottom: 43px;
}

#rectangle {
  width: 960px;
  height: 365px;
  background: #fafafa;
  margin-top: -360px;
  margin-left: 450px;
}

.lines {
  margin-top: -9px;
  border-top: 2px solid #ededed;
  position: relative;
  text-align: justify;
  width: 100%;
  margin-left: -9px;
}

.wawes {
  margin-top: -18px;
  margin-left: -44px;
}

<section>
  <div class="container">
    <div class="skills">
      <img src="img/line.png" class="skills_line" />
      <h1>My Skills</h1>
      <nav>
        <ul class="procent">
          <li>
            <h4>100%</h4>
          </li>
          <li>
            <h4>90%</h4>
          </li>
          <li>
            <h4>80%</h4>
          </li>
          <li>
            <h4>70%</h4>
          </li>
          <li>
            <h4>60%</h4>
          </li>
          <li>
            <h4>50%</h4>
          </li>
        </ul>
      </nav>
      <div id="rectangle">
        <div class="lines">
          <img src="img/wawe.png" class="wawes" />
        </div>
      </div>
    </div>
  </div>
</section>