Кнопка отображения и ul в столбце и по центру

Question

Я строю адаптивную навигационную панель, используя React.js, которая должна «свернуться» в кнопку и отобразиться в столбце в центре. Кнопка в настоящее время идеально отцентрирована, но ul немного выключен. Я дергаю себя за волосы, пытаясь решить это. Что я делаю не так?

Я перепробовал все приемы работы с flexbox, но ничего не работает.

App.css

li {
    padding: 0.5em;
    text-align: center;
}

button {
    font-size: 2rem;
    margin-top:1em;
    color: white;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
}

.navBar {
    width:100%;
    background-color: gray;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.links {
    height: 0;
    overflow: hidden;
    list-style-type: none;
    font-size: 1em;
}

.show-nav {
    height: 100%;
}


@media screen and (min-width: 768px) {

      button {
        display: none;
      }
      .links {
        height: auto;
        display: flex;
        justify-content: space-around;
        font-size: 0.8em;
      }
      .navBar {
        width:100%;
        background-color:gray;
        color: white;
        padding: 0.5em;
      }
      li {
        padding: 0 1em;
      }
}

App.js:

<div className="navBar">
            <button onClick = {this.Toggle}>
              <FiMenu/>
            </button>
            <ul className = {this.state.toggle ? "links show-nav" : "links"}>
           {
             li.map((objLink, i) => {
                  return ( <li key={i}><a href={objLink.link}>{objLink.text}</a></li> )
                  })
           }
            </ul>
</div>   

Когда кнопкаЯ хочу, чтобы все элементы (кнопка и список) отображались в столбце в центре на одной оси.

Answer 1

Проблема была с полями ul и настройками заполнения. Я добавил это в мой App.css:

ul {
    padding: 0em;
    margin: 0em;
}

Все теперь идеально выровнено.