<div class="parent parent01">
  <div class="child-box"></div>
  <ul class="child-list">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="parent parent02">
  <div class="child-box"></div>
  <ul class="child-list">
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="child-box"></div>
</div>
* {
  margin: 0;
  padding: 0;
}
body {
  min-width: 500px;
  margin: 2em;
}



.parent {
  display: flex;
}
.parent02 {
  margin-top: 3em;
}
.child-box,
.child-list li {
  width: 60px;
  height: 60px;
  background: #3498db;
}
.child-list {
  margin: 0 -10px;
}
.child-list li {
  display: inline-block;
  margin: 0 10px;
  list-style: none;
}
.parent01 .child-box {
  margin-right: auto;
}
.parent02 .child-list {
  margin: 0 auto;
}
.parent02 .child-box:nth-of-type(1) {
  background: #e74c3c;
}
.parent02 .child-box:nth-of-type(2) {
  background: #f39c12;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans:400,300

External JavaScript

This Pen doesn't use any external JavaScript resources.