margin-left auto 効かない

Question

質問失礼いたします。margin-left:auto;が効かず悩んでおります。
.second-question-spanを右寄せにしたいです。margin-left:100px;など数値指定をすると反映されるのですが、autoにすると反映されません。
なぜ反映されないのでしょうか。ご教授お願いいたします。

 <section class="nineth-section">
        <div class="fifth-inner">
            <h2 class="questions">よくあるご質問</h2>
            <div class="question">
                <ul class="question-ul">
                    <li class="question-li">
                        <p class="question-paragraph"><span class="first-question-span">Q1 </span> 初心者でも大丈夫ですか？<span class="second-question-span"><i class="fas fa-plus"></i></span></p>
                        <div class="answer-question">はい。大丈夫です</div>
                    </li>
                    
                    <li class="question-li">
                        <p class="question-paragraph"><span class="first-question-span">Q1 </span>「初心者向けスクール」とは違うんですか？<span class="second-question-span"><i class="fas fa-plus"></i></span></p>
                        <div class="answer-question">はい。大丈夫です</div>
                    </li>
                    <li class="question-li">
                        <p class="question-paragraph"><span class="first-question-span">Q1 </span> 休んだ場合は補講などありますか？<span class="second-question-span"><i class="fas fa-plus"></i></span></p>
                        <div class="answer-question">はい。大丈夫です</div>
                    </li>
                    <li class="question-li">
                        <p class="question-paragraph"><span class="first-question-span">Q1 </span> 他の言語やコースはありますか？<span class="second-question-span"><i class="fas fa-plus"></i></span></p>
                    </li>
                    <li class="question-li">
                        <p class="question-paragraph"><span class="first-question-span">Q1 </span> 未経験からフリーランスになれるんですか？<span class="second-question-span"><i class="fas fa-plus"></i></span></p>
                    </li>
                    <li class="question-li">
                        <p class="question-paragraph"><span class="first-question-span">Q1 </span> 料金の相場はどのくらいですか？<span class="second-question-span"><i class="fas fa-plus"></i></span></p>
                    </li>
                    <li class="question-li">
                        <p class="question-paragraph"><span class="first-question-span">Q1 </span> 自主学習中は質問できますか？<span class="second-question-span"><i class="fas fa-plus"></i></span></p>
                    </li>
                </ul>
            </div>
        </div>
    </section>

.questions{
    text-align: center;
    font-size: 30px;
    color:#003366 ;
    font-weight: bold;
}

.answer-question{
    background-color:rgb(248, 248, 248) ;
    padding: 10px 0px 10px 30px;
    border-radius: 10px;
    display: none;
}

.question{
    margin-top: 50px;
}

.question-li{
    background-color:rgb(248, 248, 248) ;
    padding: 20px 0px 20px 10px;
    border-radius: 10px;
    color:#003366  ;
    position: relative;
    margin-top: 10px;
    cursor: pointer;
}



.question-paragraph{
    font-size: 12px;
    font-weight: bold;

}

.first-question-span{
    font-size: 18px;
    margin-right: 10px;
}

.second-question-span{
    /* text-align: right; */
    display: inline-block;
    width: 10%;
    margin-left: auto;
    /* position: absolute;
    top: 42%;
    right: 2%; */
}

Answer 1

.second-question-spanがインライン要素なので、margin-left:auto; は効きません。
ブロックレベル要素にすれば効きますが、改行されて横並びにならないので、Flexbox で横並びにしたらどうでしょう。

.question-paragraph{
  font-size: 12px;
  font-weight: bold;
  display: flex;        /* 追加 */
  align-items: center;  /* 追加 */
}

Answer 2

fasクラスとfa-plusクラスのスタイルが無いのでどうなるのが期待どおりなのかわからないのですが、.second-question-spanにtext-align: right;を設定すれば、あくまでもwidth: 10%;で確保された幅の中では右詰めにはなります。