Q: Why is the content flowing outside of navbar in smaller window screen or mobile devices 

/* *{
  font-family: sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
} */

.main {
  min-height: calc(100vh - 10rem);
  display: grid;
  place-items: center;
}

p {
  font-size: 4rem;
  line-height: 1.6;
}

nav {
  z-index: 1;
}


/* .main1 {
  display: flex;
  justify-content: center;
  align-items: center;
} */

.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
}

.nav-link {
  position: relative;
  text-align: center;
}

.nav-link>a {
  letter-spacing: 1px;
  color: grey !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 0.5s;
}

@keyframes animation {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Navigation</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>
  <nav class="navbar navbar-expand-sm navbar-default">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-center text-center">
        <li class="nav-link"><a href="#">Home</a></li>
        <li class="nav-link"><a href="#">Upcoming Event</a></li>
        <li class="nav-link"><a href="#">Our Team</a></li>
        <li class="nav-link"><a href="#">Results</a></li>
        <li class="nav-link"><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </nav>
  <div class="container main">
    <p>Navigation Testing</p>
  </div>
</body>

</html>


I couldn't find any solution to this. First the transition from desktop screen to lower window size the content transition by overflowing out of navigation bar and then if i get to the size where toggle button activates its content again get overflowed out of navbar on clicking it. Like i did tried to set overflow property to hidden which contradicts the functioning of toggling button(to make menu items visible). Any suggestion would be appreciated guys.
Thanks.

A: Instead of positioning the navbar try flex property.
try this because of only in flex items as column in small devices view only(<=768px)
@media only screen and (max-width:768px){
  .navbar-nav.navbar-center { 
    display: flex;
    flex-direction:column;
  }
}

instead of
.navbar-nav.navbar-center { 
  position: absolute; 
  left: 50%; 
  transform: translatex(-50%); 
} 

And add below code for desktop view center align navbar-center
.navbar-nav.navbar-center { 
    float:none;
    display: flex;
    align-items: center;
    justify-content: center;
 }




.main {
  min-height: calc(100vh - 10rem);
  display: grid;
  place-items: center;
}

p {
  font-size: 4rem;
  line-height: 1.6;
}

nav {
  z-index: 1;
}
.navbar-nav.navbar-center { 
    float:none;
    display: flex;
    align-items: center;
    justify-content: center;
 }
@media only screen and (max-width:768px){
  .navbar-nav.navbar-center { 
    display: flex;
    flex-direction:column;
  }
} 

.nav-link {
  position: relative;
  text-align: center;
}

.nav-link > a {
  letter-spacing: 1px;
  color: grey !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 0.5s;
}

@keyframes animation{
  from{
      opacity: 0;
      transform: translateY(15px);
  }
  to{
      opacity: 1;
      transform: translateY(0px);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Navigation</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>

</head>

<body>
  <nav class="navbar navbar-expand-sm navbar-default">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#myNavbar"
        aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-center text-center">
        <li class="nav-link"><a href="#">Home</a></li>
        <li class="nav-link"><a href="#">Upcoming Event</a></li>
        <li class="nav-link"><a href="#">Our Team</a></li>
        <li class="nav-link"><a href="#">Results</a></li>
        <li class="nav-link"><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </nav>
  <div class="container main">
    <p>Navigation Testing</p>
  </div>
</body>

</html>


