导航栏有问题

Question

我有问题使我的导航栏坚持到页面的右手边（同时仍然在1040px容器）。我希望导航栏是在同一行的标题'Ejharris tutoring'但在右边

代码如下：

样式表：

.nav a{
    text-decoration: none;
    color: black;

}

.head .container {
  display: flex;
  align-items: center;


}

.nav-wrapper{
    
  text-align: right;
  position: relative;



}


li{
    list-style: none;
    display:inline-block;
    text-transform: uppercase;
    padding: 5px;
    position:relative;

    }

HTML：

<div class="head"> 

  <nav class="container">
    <div class="main-header">
        <h1><span class = 'EJHARRIS'>EJHARRIS</span> Tutoring</h1>
    </div>


  
      <div class="nav-wrapper">
        <ul class="nav">
            <li class="nav-about"><a href="index.html">About</a></li>
            <li class="nav-pricing"><a href="pricing.html">Pricing</a></li>
            <li class="nav-contact"><a href="contact.html">Contact</a></li>
        </ul>

      </div>
  </nav>
</div>  

Answer 1

将justify-content：space-between；添加到.container中，或者，如果您还想在左右两边添加一些空间，则将justify-content：space-around添加到.container中

Answer 2

添加此样式...

.container{
 display:flex;
 flex-direction: row-reverse;
 justify-content: space-around;

}