Alternative For [overflow:hidden]

I am currently working in our system and I find it difficult to use overflow in my HTML. Please take a look at my fiddle. and try to put overflow:hidden; in #nav-holder{ back

Solution 1:

You will need display: inline-block and set the width to 100%

inline-block

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

Change

#nav-holder{
    background: #333333;
    padding-left: 30px;
    padding-right: 30px;
}

to

#nav-holder {
    background: #333333;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    clear: both;
    display: inline-block;
}

Jsfiddle demo

You then may want to add *{box-sizing: border-box} at the top pf you css

Full demo

Read more about box-sizing here

bonus