flex-wrapで上手く折り返せない

メディアクエリでスマホの時だけ表示するドロップメニュー内にflex-wrapを使い横並びの要素を画面幅いっぱいに2列配置したいのですが、なぜか１つ目の要素だけ位置がずれてしまいます。
![
実は実装当初はきれいに横並びになっていたのですが、先程確認したところこのように位置がずれてしまうようになってしまいました。
特に記述を変更した覚えも無く困っています。
どなたか、解決方法をお分かりの方はいらっしゃらないでしょうか。

html
1<div class="drop">
2    <dt class="QA-question">
3      <p class="QA-text"><span class="icon"><i class="fas fa-bars"></span></i><span class="icon-close"><i class="fas fa-times"></i></span>MENU</p>
4  </dt>
5    <dd class="QA-answer">
6      <ul class="answer">
7        <li class="answer-text"><a href="#">twitter</a></li>
8        <li class="answer-text"><a href="#">メンバー紹介</a></li>
9        <li class="answer-text"><a href="#">ゲーム</a></li>
10        <li class="answer-text"><a href="#">対戦ゲーム</a></li>
11        <li class="answer-text"><a href="#">アニメ・漫画</a></li>
12        <li class="answer-text"><a href="#">その他</a></li>
13        <li class="answer-text"><a href="#">お問い合わせ</a></li>
14      </ul>
15    </dd>
16  </div>

css
1.drop { display: none; position: absolute; top: 0; left: 0; z-index: 9998; opacity: 0.8; }
2
3.drop-open { background-color: #e0f5f7; z-index: 9998; position: fixed; opacity: 0.8; }
4
5.icon { padding-right: 10px; }
6
7.icon-close { padding-right: 10px; display: none; }
8
9.QA-question { display: none; width: 90px; color: #f0f0f0; background-color: #535353; font-size: 14px; padding: 5px 10px; }
10
11.QA-question-active { width: 100%; color: #f0f0f0; background-color: #535353; font-size: 14px; padding: 5px 10px; }
12
13.QA-answer { padding: 5px; background-color: #535353; display: none; }
14
15.answer { display: flex; flex-wrap: wrap; }
16
17.answer-text { background-color: #292929; text-align: center; margin: 0 0.5%; padding: 10px; margin-bottom: 10px; width: 49%; }
18
19.answer-text a { display: block; text-decoration: none; color: white; }
20
21@media screen and (max-width: 568px) { .drop { display: block; }
22  .QA-question { display: block; } }

java
1$(function(){
2
3
4 //QAアコーディオン
5 $(".QA-question").on("click", function() {
6 $(this).next().slideToggle();
7 if($(this).hasClass("QA-question-active")){ // クリックされた要素がclickedクラスだったら
8   $(this).removeClass("QA-question-active");
9   // ハンバーガーアイコンを管理
10          $('.icon-close').hide();
11          $('.icon').show();
12 }else{
13   $(this).addClass("QA-question-active");
14   $(this).find(".icon-close");
15   // ハンバーガーアイコンを管理
16            $('.icon').hide();
17            $('.icon-close').show();
18 }
19  });
20
21
22 $(".drop").click(function(){
23   if($(this).hasClass("drop-open")){ // クリックされた要素がclickedクラスだったら
24     $(this).removeClass("drop-open");
25   }else{
26     $(this).addClass("drop-open");
27   }
28 });
29
30
31//チャートアコーディオン
32$(".chart-question").on("click", function() {
33$(this).next().slideToggle();
34$(this).find('p').toggleClass("QA-text2");//追加部分
35});
36
37});