元素不与左侧对齐。 我已经尝试将标签放置在 元素中，但是不允许整个

Question

JSFiddle：https://jsfiddle.net/w381kanu/

图像：（我正在尝试实现的目标）

代码：

.nobottommargin {
    align-content: left;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}

.clients-grid, .testimonials-grid {
    list-style: none;
    overflow: hidden;
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.clients-grid li, .testimonials-grid li {
    float: left;
    position: relative;
    width: 20%;
    padding-top: 16px;
    /* padding-bottom: 24px; */
    padding-left: 0px;
    padding-right: 0px;
    -webkit-backface-visibility: hidden;
}


.clients-grid li a, .clients-grid li img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 64px;
    height: 64px;
}

p{
  text-align:center;
}

.clients-grid.grid-6 li {
    width: 12.5%;
}

.li-hover {
  background-color: #F0F8FF;
}

.li-hover:hover {
  background-color: #696969;
}

<section id="content">
  <ul class="clients-grid grid-6 nobottommargin clearfix">
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Element One</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Element Two</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Earth/Horizon Element</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>One/Two/Three Elements For Elements</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Another Element</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Yet Another Element</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Element Y</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Element Z</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Receiver Element</p>
      </li>
    </a>
  </ul>
</section>

我的格式和元素左对齐时出现问题。以下是jsfiddle链接。元素填充并溢出到下一行后，内部的元素不与左侧对齐。我是...