Centering list elements

Is there a way to center the red boxes that you see, so that it is centered within the display without changing their widths?

HTML

<div class="intro">
  <p>
    My aim is to horizontally center the variable number of red boxes in the display within the following constraints:
    <br/> 1. RedBox width stays the same.
    <br /> 2. All boxes should be aligned, like a grid.
    <br /> 3. Each row of the boxes should have same starting point (as a result of 2)
    <br/>

    <em>Like shown here: <a href ="https://cl.ly/190L0W0z1i0g">Desired Behavior</a> :: So can this be solved via Flexbox or do I need CSS Grid?</em>

  </p>
</div>

<div class="wrapper">

  <ul>

    <li>
      <div>
        First
      </div>
    </li>

    <li>
      <div>
        Second
      </div>
    </li>

    <li>
      <div>
        Third
      </div>
    </li>

    <li>
      <div>
        Fourth
      </div>
    </li>

    <li>
      <div>
        Fifth
      </div>
    </li>

  </ul>
</div>

CSS

html {
	  box-sizing: border-box;
	}
	
	p {
	  padding: 1em;
	}
	
	.wrapper {
	  width: 100%;
	  min-height: 500px;
	  padding: 2em 0;
	  background: papayawhip;
	  border: 1px solid orange;
	  overflow: hidden;
	  display: flex;
	  justify-content: center;
	}
	
	ul {
	  display: flex;
	  background: mistyrose;
	  width: 100%;
	  justify-content: center;
    align-items: center;
	  flex-wrap: wrap;
	  margin: 1em;
	  border: 1px solid blue;
	  padding: 0;
	}
	
	li {
	  display: block;
	  background: indianred;
	  width: 200px;
	  height: 200px;
	  margin: .1em;
	  /* padding: 1em; */
	  color: white;
	  font-size: 2rem;
	  text-align: center;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  align-self: stretch;
	  border: 1px solid azure;
	}
	
	li div {
	  display: inline-block;
	}
	/* li:first-child {
	padding: 	
} */