Tell me how to place item 1 on the left, items 2,3,4 in the center, and item 5 to the right so that when the screen is displaced, I did not go anything

for example something like this

& lt; nav class navbar-fix navbar-custom = "navigation" & gt;
    & lt; div class = "Container" & gt;
      & lt; div class = "navbar-header" & gt;
        & lt; Button id = "Menu" type = "Button" class = "Navbar-Toggle" Data-Toggle = "collapse" data-target = ". Navbar-Main-collapse" & gt;
          & lt; I class = "FA FA-BARS" & gt; & lt; / i & gt;
        & lt; / Button & gt;
        & lt; a class = "navbar-brand Page-SCROLL NAV-FT Pull-Left" href = "# Pap-Top" & gt; Paragraph 1 & lt; / a & gt;
      & lt; / div & gt;
      & lt; div class = "collapse navbar-collapse navbar-main-collapse" & gt;
        & lt; ul class = "nav-ft nav navbar-nav" & gt;
          & lt; li class = "hidden" & gt;
            & lt; a href = "# PAD-TOP" & gt; & lt; / a & gt;
          & lt; / li & gt;
          & lt; li & gt;
            & lt; a class = "Page-SCROLL" HREF = "# Video" & gt; clause 2 & lt; / a & gt;
          & lt; / li & gt;
          & lt; li & gt;
            & lt; a class = "Page-SCROLL" HREF = "# NEWS" & GT; clause 3 & lt; / a & gt;
          & lt; / li & gt;
          & lt; li & gt;
            & lt; a class = "Page-SCROLL" HREF = "# NEWS" & GT; Paragraph4 & lt; / a & gt;
          & lt; / li & gt;
        & lt; / ul & gt;
        & lt; ul class = "Nav Navbar-Nav Pull-Right" & gt;
          & lt; li & gt;
            & lt; a class = "Page-Scroll" href = "# Video" & gt; paragraph 5 & lt; / a & gt;
          & lt; / li & gt;
          & lt; li & gt;
            & lt; a class = "Page-SCROLL" HREF = "# NEWS" & GT; paragraph 6 & lt; / a & gt;
          & lt; / li & gt;
        & lt; / ul & gt;
      & lt; / div & gt;
    & lt; / div & gt;
  & lt; / nav & gt;

Answer 1, Authority 100%

Use a fixed width of the site or make adaptive layout.

either for .container Fix. Width

. Container {
  width: 960px;
}

either when the screen is narrowing less 700px (random value) hide or adapt the menu

@ media (max-width: 700px) {
 .navbar .pull-right {
  Display: None;
 }
}

Answer 2, Authority 33%

You have a problem with the size of fonts. The menu items themselves are mastered normally, just in the current font size you have no inscriptions.

You can implement for each screen size of the screen your own menu follow the font size in which all the inscriptions would be placed.

This can be done with the help of Hidden- * and Visible- * Clasts where * may be XS, SM, MD, etc. That is, the identifier of your width, as well as in the CSS classes that you specify the width of the speakers.

For example, we make the current option of the menu visible only on small devices (visible-SM) and hide for the rest (Hidden-XS, Hidden-MD and Hidden-LG), and in the FontSizes class we prescribe the font size for the current menu implementation.

& lt; nav class = "navbar navbar-default hidden-xs visible-SM Hidden-MD Hidden-LG" & gt;
   & lt; div class = "Container-Fluid Fontsizesm" & gt;
    ...
   & lt; / div & gt;
  & lt; / nav & gt;

and so for each screen width that does not suit us