Navigation bar error

1

Hello everyone,

got a problem while building my portfolio page and can’t figure out the solution.

there is a problem with my navigation bar. while i keep my screen width large everything is ok but if i resize width of the page this happens :
Untitled-4

and my code:

div class=“background”
div class=“container”
div class=“jumbotron” id=“navigation”
div class=“row "
div class=“col-xs-3” /div
div class=“col-xs-2”
h4 class=“text-center” a href=”#about" ABOUT /a /h4
/div
div class=“col-xs-2”
h4 class=“text-center” a href="#portfolio" PORTFOLIO /a /h4
/div
div class=“col-xs-2”
h4 class=“text-center” a href="#contacts" CONTACTS /a / h4
/div
div class=“col-xs-3” /div
/div
/div
/div

.background {
background-color: #b1d6eb;
}

#navigation {
background-color: #464553;
padding: 20px;
margin-top: 50px;
}

div {
font-family: “lato”, “Verdana”, “Arial”, “sans-serif”;
}

(had to delete < > brackets from html code after i pasted it here, otherwise my code wouldn’t appear)

3 
<div class="background">
<div class="container">
  <div class="jumbotron" id="navigation">
    <div class="row ">
      <div class="col-xs-3"></div>
      <div class="col-xs-2">
        <h4 class="text-center"> <a href="#about"> ABOUT </a> <h4>
      </div>
      <div class="col-xs-2">
        <h4 class="text-center"> <a href="#portfolio"> PORTFOLIO </a> <h4>
      </div>
      <div class="col-xs-2">
        <h4 class="text-center"> <a href="#contacts"> CONTACTS </a> <h4>
      </div>
      <div class="col-xs-3"></div>  
    </div>
  </div>
</div>

.background {
  background-color:  #b1d6eb;
}

#navigation {
  background-color: #464553;
  padding: 20px;
  margin-top: 50px;
}

div {
  font-family: "lato", "Verdana", "Arial", "sans-serif";
}