コーディングつまずき①(aタグが改行してしまう)

デザインが完成し、コーディングにとりかかっています。
デザインしながらも、これはこうコーディングできるなとか考えながらだったので、マークアップなら特につまづかないかなと思っていたのですが。。。
考えが甘かった！！

ということで、つまずきポイントをメモしていきます。

＜ナビ＞
いきなりぶつかりました。

ナビに体験レッスン予約ボタンを配置したいのですが、うまくいきませんでした。奮闘を重ね、解決に向かう過程を記録していきます。

まず、naviにul(ナビの項目)とdiv(体験予約ボタン)で配置します。
(最初は予約ボタンはnaviの外でdivをくくっていましたが、うまくいかずデザインを参考にしたサイトのhtmlを見ると、navi内に入れていたのでそうすることにしました。)
範囲が分かりやすいようにバックカラーをつけて、コーディングしていきました。

  <nav class="navi inner">
  <ul class="header_navi flex between">
   <li><a href="">About</a></li>
   <li><a href="">生徒の声</a></li>
   <li><a href="">料金</a></li>
   <li><a href="">アクセス</a></li>
   <li><a href="">よくある質問</a></li>
  </ul>

<span class="navi_lesson">
<a href="">体験レッスンを予約</a>
</span>
 </nav>

この二つを横並びにしてflexboxのjustify-content: space-between;で間隔をあけようとしましたが。。。
　　　　　　　　　　　　　　　   ↓

ナビにつけていたspace-betweenが打ち消されてしまいました。なので、ナビの余白は、marginであけることに変更。
それと予約ボタンはinner(幅1000pxで指定)より、外側にあったことに気づき変更
　　　　　　　　　　　　　　　　↓

だいぶ近づいてきました。ここからが問題。
体験レッスンのボタンに余白をつけるため、paddingをつけると。。。

改行されてしまうのです。ならば、ボタンの幅を指定してあげればいいのかと思って指定しても変化なし。
自分の画面で見る分にはいいのですが、幅を狭めていくとナビの項目も改行されてしまいます。

何か改行しないようにするCSSないのかなと思って調べると出てきました↓

CSSのwhite-spaceの使い方：pre、wrap、nowrapなどの違いは？

white-space：nowrap；をレッスン予約ボタンにつけて、改行しないようにしました。

この解決策であってるかわかりませんが、w700くらいまではくずれないようになりました！

まとめ
一つつまずくと、嫌になって投げ出しそうになりますが、こうやってnoteに書いていくと、もやもやが整理されて冷静になれるので個人的にすきです。
分からないところは、少し悩んで解決しなければいったん諦め、日にちを改めたり、誰かに聞いた方が効率もいいなと思いました。