Как сделать меню на сайте в одну строку

[Troy Lewis]

Всем привет! Всё не могу сделать в одну строчку эти данные, помогите пожалуйста: :an:

      <div id="navBar__menu">
          <div class="main-menu">

            <div class="logo">
              <a href="#"><img src="templates/images/logo.png"></a>
            </div>

            <ul class="main-menu__ul">
              <li class="main-menu__li">
                <a href="news.html" class="main-menu__link">Новости</a>
              </li>
              <li class="main-menu__li">
                <a href="news.html" class="main-menu__link">Форум</a>
              </li>
              <li class="main-menu__li">
                <a href="news.html" class="main-menu__link">Донат</a>
              </li>
              <li class="main-menu__li">
                <a href="news.html" class="main-menu__link">О проекте</a>
              </li>
            </ul>

              <div class="login">
                <a href="login.php" class="btn__login"><svg class="icon btn__icon" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16z" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10"></path><path d="M8.975 11.258a2.92 2.92 0 1 0 0-5.84 2.92 2.92 0 0 0 0 5.84z" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10"></path><path d="M4.191 15.405c0-2.65 2.135-4.172 4.786-4.172 2.65 0 4.785 1.522 4.785 4.172" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10"></path></svg>Личный кабинет</a>
              </div>

            </div>
          </div>

CSS:

.main-menu {
  margin-top: 100px;
  width: 100%;
  position: relative;
  z-index: 100;
  display: block;
  margin: 58px 0 52px;
  height: 2px;
}

ul.main-menu__ul {
  display: flex;
  padding: 0;
  justify-content: center;
}

li.main-menu__li {
  padding: 18px;
}

.main-menu__link {
  display: block;
  text-decoration: none;
  color: #333;
}

.login {
  position: relative;
  display: block;
  padding: 6px 10px 0;
  font-size: 14px;
  line-height: 27px;
}

.btn__icon {
  margin: 0 6px 0 0;
  vertical-align: top;
}

.icon {
  display: inline-block;
  vertical-align: middle;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  position: relative;
}

.btn__login {
  padding: .7em 1.5em;
  color: #fff;
  background: linear-gradient(90.09deg, #37ae80 -6.21%, #37ae80 -6.19%, #167450 137.03%);
  border-radius: 20px;
  transition: 0.2s all;
}

.btn__login:hover {
  box-shadow: 0 5px 35px rgba(0, 0, 0, 0.22);
}