home ~ projects ~ socials

Put Items On The Left And Right Of A Header

HTML

<div class="header-example">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <ul>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

Output

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

CSS

.header-example {
  display: flex;
  justify-content: space-between;
}

.header-example ul {
  padding: 0;
  display: flex;
  list-style: none;
  gap: 12px;
}
-- end of line --