Top Navigation with BassCSS and CSS3 - html

Question

I've been trying to imitate what I consider is a great design for top navigation. The top navigation is from this website here: Giphy
For my layout I've been using BassCSS latest version which is the Basscss v8.0.1. Here's what I have so far:
HTML:
<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">
Home
</div>
<div class="col mx-auto center border-bottom border-green strong-border px3">
Categories
</div>
<div class="col mx-auto center border-bottom border-purple strong-border px3">
Tags
</div>
<div class="col mx-auto center border-bottom border-aqua strong-border px3">
Information
</div>
<div class="col mx-auto center border-bottom border-yellow strong-border px3">
Search
</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>
The CSS files for BassCSS can be found at the official website (I can't post more than two links). I just extended on little thing:
.strong-border{
border-bottom-width: 5px;
}
And that gives me the desire strong border. You can see my version in codepen. That's what I have already but it isn't as good looking as the original because of that white-space problem (Before the links there's some white-space) and this is caused because the links are centered in their container. Also, I don't want the background color to be black and so I was looking for it to look great on white.
Can you please help me to get it a little bit more like the original?
BTW, here's a codepen link with my version on it so you can go ahead and see/play it. :-)

Answer 1

You could use :first-child and :last-child to specify that you don't want the margin left respectively right on the extremity items.
Something like this:
div.mb1 div:first-child {
margin-left: 0;
}
div.mb1 div:last-child {
margin-right: 0;
}
where div.mb1 is the parent and so the properties are specified on the first and last child div.
Here is the updated codepen.
Hope I got the problem right.