SO-66564996

by David Thomas

HTML

<div class="footer">
  <!-- this element serves to wrap each of the content 'columns'
       in <li> elements in order that flex-box layout can
       position the <h4> along with its associated list of
       links; the class-name is used for ease-of-selecting: -->
  <ul class="footer-list">
    <li>
      <h4>Kontakt</h4>
      <ul>
        <li>Mobilni: 062/329-077</li>
      </ul>
    </li>

    <li>
      <h4>Podaci</h4>
      <ul>
        <li>PIB: 112295370</li>
        <li>Matični broj: 66007057</li>
      </ul>
    </li>
    <li>
      <h4>Lokacija</h4>
      <ul>
        <li>Oslobođenja 32c, Rumenka</li>
      </ul>

    </li>
  </ul>
</div>

CSS

/* a basic reset so that elements are sized, and
   spaced, consistently: */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* removing all list-markers from the <ul> elements
   within the .footer element: */
.footer ul {
  list-style-type: none;
}

.footer-list {
  display: flex;
  justify-content: space-between;
}

/* to show how a marker could be added back to the
   descendant <li> elements that follow the <h4>:  */
h4 + ul ::marker {
  /* a right guillemet, using unicode: */
  content: '\00BB';
  width: 0.5em;
}

h4 + ul li {
  /* making space for the marker: */
  margin-left: 0.6em;
}