horizontal scroll

1.scroll{
2	overflow-x: scroll;
3	overflow-y: hidden;
4	height: 80px;
5  	white-space:nowrap
6}

1<div class="scrolling-wrapper">
2  <div class="card"><h2>Card</h2></div>
3  <div class="card"><h2>Card</h2></div>
4  <div class="card"><h2>Card</h2></div>
5  <div class="card"><h2>Card</h2></div>
6  <div class="card"><h2>Card</h2></div>
7  <div class="card"><h2>Card</h2></div>
8  <div class="card"><h2>Card</h2></div>
9  <div class="card"><h2>Card</h2></div>
10  <div class="card"><h2>Card</h2></div>
11</div>
12.scrolling-wrapper {
13  overflow-x: scroll;
14  overflow-y: hidden;
15  white-space: nowrap;
16
17  .card {
18    display: inline-block;
19  }
20}

1overflow-x: auto(show when needed) or hidden(never) or scroll(always scroll);

1.scrolling-wrapper-flexbox {  display: flex;  flex-wrap: nowrap;  overflow-x: auto;  .card {    flex: 0 0 auto;  }}

1.navbar
2    float: left
3    height: 40px
4    min-width: 100%
5    display: flex
6    flex-wrap: wrap
7
8    .navbar-item
9        padding: 13px 0px
10        font-size: 12px
11        line-height: 14px
12        text-transform: uppercase
13        display: inline-block
14        float: left
15        margin: 0px 10px
16
17        &.active
18            padding: 13px 0px 11px 0px
19            border-bottom: 2px solid $light-blue
20
21        &:hover
22            cursor: pointer
23
24        a 
25            color: $dark-grey
26            font-weight: 600
27            text-decoration: none