list items or divs?

Hi Jenny, The short answer is, it doesn't matter. The longer answer is, there are 2 things to consider when making that decision: the first is browser default styling, and the second is semantic markup.

If you use lists (<ul> and <li>), you have better semantic markup (a good thing!), but you have to override a browser's default styling of those elements. Most browsers will add padding-left and list-style and also maybe margin-top and margin-bottom to the <ul> element. Your CSS would have to zero those out for this element to avoid unintended styling (see how in code snippet below).

In order to keep <li> items centered, you'd have to get a little tricky. Probably the easiest way is to add text-align: center to the <ul> element, and change the <li>'s display style to either inline or inline-block so they respect their parent's center alignment style.

This should make everything look how you want:

ul.icon-group {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.icon-group li {
  display: inline-block;
}

One thing to keep in mind is that using inline or inline-block will add a bit of whitespace around each <li> element, so they won't be exactly touching each other, and you can't get them to hit the exact full-width of the <ul> element. That may be fine in your case, however if you need to avoid whitespace, you need to set your <li>s to float: left, make your <ul> element display: inline-block, and create a parent (container) element for the <ul> that has the text-align: center style. This will keep the <ul> as a whole centered but allow the <li>s to not have any extra whitespace around them. Example HTML:

<div class="icon-group-container">
  <ul>
    <li>whatever</li>
    <li>whatever</li>
    <li>whatever</li>
  </ul>
</div>

And the CSS for it:

.icon-group-container {
  text-align: center;
}
.icon-group-container ul {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.icon-group-container li {
  display: block;
  float: left;
}

For the responsive-ness, you can then add media queries and percentage-based widths to the <li> elements to get them looking good across all viewports.

Let me know if that's solved it for you and makes sense to you. Good luck!