Попытка центрировать меню Navbar для мобильных устройств

Question

Я пытаюсь сделать так, чтобы моя навигационная панель центрировалась, как только она достигла размера экрана телефона по ширине. Я полагаю, что я просто делаю @media all и (max-width: 600px) {{.menu ul? text-align: center;}} и все это под css для размера рабочего стола. (Будьте добры. Я только что закончил Bootcamp :))

<div class="hero-image">
  <div class="topnav">
    <ul class="menu">
      <li class="item"><a href="#">Home</a></li>
      <li class="item"><a href="#">My Work</a></li>
      <li class="item"><a href="#">About Me</a></li>
    </ul>
  </div>
  <div class="hero-text">
    <h1>Kyle Williamson</h1>
    <h2>Web Developer</h2>
    <button>Contact me</button>
  </div>
</div>

<div class="about">
  <div class="about-text">

Это все мои CSS ниже для размера экрана рабочего стола. Я не уверен, что не так. Это просто не меняется или может я не правильно ставлю CSS?

@import url("https://fonts.googleapis.com/css?family=Muli:300|Spartan:300,400,600&display=swap");

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  float: right;
}

.menu ul {
  text-align: center;
}

.menu li {
  list-style-type: none;
}

.menu li a {
  color: white;
  text-decoration: none;
  float: right;
  font-family: "Muli", serif;
  font-size: 23px;
  display: block;
  padding: 15px 7px;
  margin-right: 15px;
}

.menu li a:hover {
  background-color: white;
  color: black;
  transition: 0.3s;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("denver2.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  font-family: "Muli";
  font-weight: normal;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

button {
  background: transparent;
  border-radius: 28px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  border: 1px solid white;
  font-family: Arial;
  font-size: 17px;
  padding: 8px 15px;
  text-decoration: none;
  transition: 0.3s;
}

button:hover {
  background-color: white;
  color: black;
}

button:active {
  position: relative;
  top: 1px;
}

@media screen and (max-width: 600px) {
  .menu ul {
    text-align: center;
  }
}

Answer 1

В вашем случае .menu - это ul, поэтому ваше правило медиа-запроса не будет нацелено ни на один элемент (элементы) HTML. Кроме того, text-align: center не так, как вы хотите справиться с этим. Вы уже указали flex родительский элемент, поэтому мы можем использовать justify-content для центрирования.

@media screen and (max-width: 600px) {
  .menu  {
    justify-content: center;
    width: 100%;
  }
}

@import url("https://fonts.googleapis.com/css?family=Muli:300|Spartan:300,400,600&display=swap");

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  float: right;
}

.menu ul {
  text-align: center;
}

.menu li {
  list-style-type: none;
}

.menu li a {
  color: white;
  text-decoration: none;
  float: right;
  font-family: "Muli", serif;
  font-size: 23px;
  display: block;
  padding: 15px 7px;
  margin-right: 15px;
}

.menu li a:hover {
  background-color: white;
  color: black;
  transition: 0.3s;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("denver2.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  font-family: "Muli";
  font-weight: normal;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

button {
  background: transparent;
  border-radius: 28px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  border: 1px solid white;
  font-family: Arial;
  font-size: 17px;
  padding: 8px 15px;
  text-decoration: none;
  transition: 0.3s;
}

button:hover {
  background-color: white;
  color: black;
}

button:active {
  position: relative;
  top: 1px;
}

@media screen and (max-width: 600px) {
  .menu  {
    justify-content: center;
    width: 100%;
  }
}

<div class="hero-image">
  <div class="topnav">
    <ul class="menu">
      <li class="item"><a href="#">Home</a></li>
      <li class="item"><a href="#">My Work</a></li>
      <li class="item"><a href="#">About Me</a></li>
    </ul>
  </div>
  <div class="hero-text">
    <h1>Kyle Williamson</h1>
    <h2>Web Developer</h2>
    <button>Contact me</button>
  </div>
</div>

jsFiddle