Настройка панели навигации React

Я новичок в реагировании, поэтому пытаюсь создать простую панель навигации. Я чувствую, что это сильно отличается от простого HTML и CSS. Я написал код на простом HTML и CSS, и он работал, но в реакции это не так.
Ну, первая проблема: я хочу настроить свои <Ul> элементы в нижней части панели навигации.
вторая проблема: когда я добавляю contact us or about us, он разрывает строку и переходит на другую строку. это мое изображение и код, пожалуйста, помогите.....
мой код:

code UPDATED changed UL 

.wrapper header nav ul {
  display: inline-flex;
  list-style: none;
  white-space: nowrap;
  float: right;
}

HTML

import React, { Component } from "react";

class Navbar extends Component {
  state = {};
  render() {
    return (
      <nav>
        <div className = "brandName">
          <h1>PACHEX</h1>
        </div>
        <ul>
          <li>
            <a href = "_blank">Home</a>
          </li>
          <li>
            <a href = "_blank">Picture</a>
          </li>
          <li>
            <a href = "_blank">Video</a>
          </li>
          <li>
            <a href = "_blank">About</a>
          </li>
          <li>
            <a href = "_blank">Contact</a>
          </li>
        </ul>
      </nav>
    );
  }
}

export default Navbar;

CSS:

.wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrapper header nav {
  width: 100%;
  background-color: #b5d404;
  padding: 0.5%;
}
.wrapper header nav .brandName {
  color: white;
  padding: 0.5%;
  display: inline-flex;
}
.wrapper header nav .brandName:hover {
  color: #ffff33;
}
.wrapper header nav ul {
  display: inline-flex;
  list-style: none;
  float: right;
}
.wrapper header nav ul li {
  margin-right: 10px;
}
.wrapper header nav ul li a {
  padding: 0.5%;
  margin-right: 20px;
  text-decoration: none;
  font-size: x-large;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1;
}
.wrapper header nav ul li a:hover {
  color: #ffff33;
  margin-top: 20px;
}