1

I am having an issue formatting and

  • elements to align left. Below is the jsfiddle link. After the elements fill the and overflow to the next row,
  • elements inside don't align to the left side.

    I've tried placing the tag inside

  • elements, however that doesn't allow the entire
  • tag to be clickable. The goal was for the entire
  • tag with padding to be clickable.

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

    Image: enter image description here (what I am trying to achieve)

    Code:

    .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>
    • SoRobby
    • 273
    • 2
    • 8
  • side note, your html is invalid `
  • ` must be direct children of the `
      ` [spec](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element)
    • – Rainbow Apr 05 '20 at 19:05