Q: Add horizontal space between list items enclosed in shape I've made a list where the text is enclosed within a circle.  The issue is the circles run into each other horizontally, and I'd like some space between them.  I've tried messing with the padding and margin but have had no luck.


.oval {
  width: 120px;
  height: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: gray;
  color: white;
  border: 2px solid white;
  font-weight: bold;
}
<ul>
  <li class="oval">item1</li>
  <li class="oval">item2</li>
  <li class="oval">item3</li>
</ul>



A: A flexbox solution...


ul {
  display: flex;
  /* change this value as you need */
  width: 500px; 
  justify-content: space-between;
}

.oval {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 100px;
  border-radius: 50%;
  background: gray;
  color: white;
  border: 2px solid white;
  font-weight: bold;
}
<ul>
  <li class="oval">item1</li>
  <li class="oval">item2</li>
  <li class="oval">item3</li>
</ul>



A: Just set the display to inline-block and then you can play with the margins


.oval {
  width: 120px;
  height: 100px;
  display: inline-block;
  margin-right: 50px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: gray;
  color: white;
  border: 2px solid white;
  font-weight: bold;
}
<ul>
  <li class="oval">item1</li>
  <li class="oval">item2</li>
  <li class="oval">item3</li>
</ul>


To be more precise, instead of adding the margin-right rule for all .oval elements I would add it to all but the last one with:
.oval:not(:last-child) {
  margin-right: 50px;
}


A: Set the display to inline-block to .oval
