CSS overflow option to hide the whole element rather than clicking it

Question

This is what I have at the moment:

<ul>
    <li><a href="#"><i class="fa fa-home"></i>Home page</a></li>
    <li><a href="#" id="create-new-btn"><i class="fa fa-plus"></i>Create new...</a></li>
    <li><a href="#"><i class="fa fa-user"></i>My profile</a></li>
</ul>

And for the container:

#pando-header-c {
  position:absolute;
  left:100px;
  right:430px;
  height:50px;
  white-space: nowrap;
  overflow:hidden;
  display:block; 
}

However, for some reason, it partially displays the elements and does not completely cut them when overflowing; despite the fact that I installed them all in a string block and block (a, as well as whether).

Here's how he pinches it: http://i.stack.imgur.com/dNTJ2.png

The question is how to make the whole element invisible, if it does not fit completely, speed up the cutting of the text.

Answer 1

- , , , . , hidden " ", . , , , - -:

@media screen and (max-width: 600px) {
  #pando-header-c {
    display: none;
  }
}

, CSS, , , , .