* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
	font-family: 'Tahoma', sans-serif ;
	font-weight: bold;
	text-align: center;
	color:#FFF
	
  
}

header {
  width: 100%;
  padding: 40px;
  color: white;
  text-align:center;
  background: black;
}

nav ul {
  background: black;
  text-align: center;
  list-style: none;
  overflow: hidden;

}

ul li {
  display: inline-block;
  padding: 17px;
  transition: all ease-in-out 250ms;
}

ul li:hover {
  background: red;
}

ul li a {
  color: white;
  text-decoration: none;
}

.hide {
  padding: 16px;
  font-size: 22px;
  background: black;
  color: white;
  cursor: pointer;
  display: none;
}

@media (max-width: 768px) {
  ul li {
    width: 100%;
    padding: 25px;
    text-align: left;
  }

  .hide {
    display: block;
  }

  nav ul {
  display: none;

  }
}
@media screen and (min-width: 320px) and (max-width: 480px) {
	 ul li {
    width: 100%;
    padding: 125px;
    text-align:right;
  }

  .hide {
    display: block;
  }

  nav ul {
  display: none;

  }
}
	
@media screen and (min-width: 481px) and (max-width: 768px) {
 ul li {
    width: 100%;
    padding: 25px;
    text-align: left;
  }

  .hide {
    display: block;
  }

  nav ul {
  display: none;

  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
	 ul li {
    width: 100%;
    padding: 25px;
    text-align: left;
  }

  .hide {
    display: block;
  }

  nav ul {
  display: none;

  }
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
 ul li {
    width: 100%;
    padding: 25px;
    text-align: left;
  }

  .hide {
    display: block;
  }

  nav ul {
  display: none;

  }
}
@media screen and (max-width: 600px) {
  ul li {
    width: 100%;
    padding: 25px;
    text-align: left;
  }

  .hide {
    display: block;
  }

  nav ul {
  display: none;

  }
}

@media (max-width: 768px) {
	@media screen and (max-width: 768px) {
  ul li {
    width: 100%;
    padding: 25px;
    text-align: left;
  }

  .hide {
    display: block;
  }

  nav ul {
  display: none;

  }
}


@media screen and (max-width: 992px) {
  ul li {
    width: 100%;
    padding: 25px;
    text-align: left;
  }

  .hide {
    display: block;
  }

  nav ul {
  display: none;

  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  ul li {
    width: 100%;
    padding: 25px;
    text-align: left;
  }

  .hide {
    display: block;
  }

  nav ul {
  display: none;

  }
}

@media screen and (min-width: 1024px) {
  ul li {
    width: 100%;
    padding: 25px;
    text-align: left;
  }

  .hide {
    display: block;
  }

  nav ul {
  display: none;

  }
}









<title>A</title>