BassCSSとCSS3を使ったトップナビゲーション

Question

私はトップナビゲーションのための素晴らしいデザインだと思っています。上のナビゲーションは、このウェブサイトからです：Giphy

私のレイアウトでは、BassCSSの最新バージョンであるBasscss v8.0.1を使用しています。ここで私がこれまで持っているものです。

HTML：BassCSSため

<div class="clearfix xs-hide mx-auto bg-white flex flex-justify md-col-12 lg-col-8 mb1"> 
    <div class="col mx-auto center border-bottom border-red strong-border px3"> 
     <a href="" class=" caps bold red h4 text-decoration-none">Home</a> 
    </div> 
    <div class="col mx-auto center border-bottom border-green strong-border px3"> 
     <a href="" class=" caps bold green h4 text-decoration-none">Categories</a> 
    </div> 
    <div class="col mx-auto center border-bottom border-purple strong-border px3"> 
     <a href="" class=" caps bold purple h4 text-decoration-none">Tags</a> 
    </div> 
    <div class="col mx-auto center border-bottom border-aqua strong-border px3"> 
     <a href="" class=" caps bold aqua h4 text-decoration-none">Information</a> 
    </div> 
    <div class="col mx-auto center border-bottom border-yellow strong-border px3"> 
     <a href="" class=" caps bold yellow h4 text-decoration-none">Search</a> 
    </div> 
    </div> 
    <div class="clearfix xs-hide flex mx-auto md-col-12 lg-col-8 mb1"> 
    <label for="search-input" class="hide">Search</label> 
    <input 
     type="search" 
     id="search-input" 
     class="flex-auto py1 px1 m0 field not-rounded" 
     placeholder="Search term"> 
    <button class="border black bg-aqua not-rounded">Go</button> 
    </div> 

CSSファイルは、公式ウェブサイトで見つけることができます（私は2つのリンクより投稿することはできません）。私はちょうど少し事に伸ばした：

.strong-border{ 
    border-bottom-width: 5px; 
} 

そしてそれは私に強い境界線を与えます。あなたは私のバージョンをcodepenで見ることができます。それは私が既に持っているものですが、ホワイトスペース問題（リンクの前に白い部分があります）のためにオリジナルとよく似ていません。これはリンクがそのコンテナの中央に配置されているために発生します。また、私は背景色がの黒いであることを望んでいないので、私は白く見栄えを探していました。

元のように少しでも手伝ってもらえますか？

ところで、ここにcodepen linkがありますので、私のバージョンでご覧になることができます。 :-)

Answer 1

:first-childと:last-childを使用して、四肢の両端に余白をそれぞれ残さないように指定することができます。このような

何か：

div.mb1 div:first-child { 
    margin-left: 0; 
} 
div.mb1 div:last-child { 
    margin-right: 0; 
} 

div.mb1が親であるので、プロパティは最初と最後の子divに指定されています。

ここにはupdated codepenがあります。

私は問題が正しいと思っています。