Why is my navigation stretching?

Question

css

According to the layout, I need to do this , but for some reason it turns out like this (I can’t understand what I’m doing wrong)
Here is the code (I did it using flex)

<div class="barmenu">
                   <nav class="choice">
                   <h4 class="bar__text">filter by type</h4>
                   
                   
                       <a href="#" class="ch chact">All</a>
                       <a href="#" class="ch">Web design</a>
                       <a href="#" class="ch">Mobile design</a>
                       <a href="#" class="ch">Photography</a>
                   </nav>
               </div>

.barmenu{
    width: 100%;
    margin-top: 115px;
}

.bar__text{
    text-transform: uppercase;
    color: #222;
    
    font-size: 18px;
}

.choice{
    display: flex;
    justify-content: space-between; 
    background-color: aquamarine;
    
    
}

.ch{
    color: #6c6c6c;
    font-size: 18px;
    text-transform: capitalize;
    border-right: 2px solid #999999;
    padding-right: 10px;
    
    
    background-color: aqua;
    
    
    transition: color .2s linear;
}

Answer 1

can't be checked without a sandbox, but it will most likely solve your problem if:
For the .bar__text block, add a style margin-right: auto;
In the .choice block, the style justify-content: space-between;is no longer needed