/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS Bin</title>
<style id="jsbin-css">
.topnav{
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: pink;
  /* overflow: hidden; */
}

.topnav li{
  float: left;
  margin-right: 20px;
  padding: 5px 10px
}

.topnav li a{
  display: block;
  text-decoration: none;

}

.clearfix:after{
  content: '';
  display: table;
  clear: both;
}

/* .topnav li.right{
  margin-right: 10px;
  float: right;
} */


@media screen and (max-width: 250px)  {
  .topnav li{
    float: none;
    text-align: center;
  }
}

@media screen and (min-width: 251px) and (max-width: 500px) {
  .topnav{
    width: 25%;
    float: left;
  }
  .topnav li{
    float: none;
  }
  .content{
    margin-left: 25%;
  }
}
</style>
</head>
<body>

<ul class="topnav clearfix">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li class="right"><a href="#about">About</a></li>
</ul>
  <div class="content " style="padding:0 16px;">
  <h2>Responsive Topnav Example</h2>
  <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p>
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
  <h4>Resize the browser window to see the effect.</h4>
</div>


<script id="jsbin-source-css" type="text/css">.topnav{
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: pink;
  /* overflow: hidden; */
}

.topnav li{
  float: left;
  margin-right: 20px;
  padding: 5px 10px
}

.topnav li a{
  display: block;
  text-decoration: none;

}

.clearfix:after{
  content: '';
  display: table;
  clear: both;
}

/* .topnav li.right{
  margin-right: 10px;
  float: right;
} */


@media screen and (max-width: 250px)  {
  .topnav li{
    float: none;
    text-align: center;
  }
}

@media screen and (min-width: 251px) and (max-width: 500px) {
  .topnav{
    width: 25%;
    float: left;
  }
  .topnav li{
    float: none;
  }
  .content{
    margin-left: 25%;
  }
}
</script>
</body>
</html>

## jsbin.karagohoqi.css
.topnav{
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: pink;
  /* overflow: hidden; */
}

.topnav li{
  float: left;
  margin-right: 20px;
  padding: 5px 10px
}

.topnav li a{
  display: block;
  text-decoration: none;

}

.clearfix:after{
  content: '';
  display: table;
  clear: both;
}

/* .topnav li.right{
  margin-right: 10px;
  float: right;
} */


@media screen and (max-width: 250px)  {
  .topnav li{
    float: none;
    text-align: center;
  }
}

@media screen and (min-width: 251px) and (max-width: 500px) {
  .topnav{
    width: 25%;
    float: left;
  }
  .topnav li{
    float: none;
  }
  .content{
    margin-left: 25%;
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.topnav{
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: pink;
	/* overflow: hidden; */
	}

	.topnav li{
	float: left;
	margin-right: 20px;
	padding: 5px 10px
	}

	.topnav li a{
	display: block;
	text-decoration: none;

	}

	.clearfix:after{
	content: '';
	display: table;
	clear: both;
	}

	/* .topnav li.right{
	margin-right: 10px;
	float: right;
	} */


	@media screen and (max-width: 250px) {
	.topnav li{
	float: none;
	text-align: center;
	}
	}

	@media screen and (min-width: 251px) and (max-width: 500px) {
	.topnav{
	width: 25%;
	float: left;
	}
	.topnav li{
	float: none;
	}
	.content{
	margin-left: 25%;
	}
	}
	</style>
	</head>
	<body>

	<ul class="topnav clearfix">
	<li><a class="active" href="#home">Home</a></li>
	<li><a href="#news">News</a></li>
	<li><a href="#contact">Contact</a></li>
	<li class="right"><a href="#about">About</a></li>
	</ul>
	<div class="content " style="padding:0 16px;">
	<h2>Responsive Topnav Example</h2>
	<p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p>
	<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
	<h4>Resize the browser window to see the effect.</h4>
	</div>



	<script id="jsbin-source-css" type="text/css">.topnav{
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: pink;
	/* overflow: hidden; */
	}

	.topnav li{
	float: left;
	margin-right: 20px;
	padding: 5px 10px
	}

	.topnav li a{
	display: block;
	text-decoration: none;

	}

	.clearfix:after{
	content: '';
	display: table;
	clear: both;
	}

	/* .topnav li.right{
	margin-right: 10px;
	float: right;
	} */


	@media screen and (max-width: 250px) {
	.topnav li{
	float: none;
	text-align: center;
	}
	}

	@media screen and (min-width: 251px) and (max-width: 500px) {
	.topnav{
	width: 25%;
	float: left;
	}
	.topnav li{
	float: none;
	}
	.content{
	margin-left: 25%;
	}
	}
	</script>
	</body>
	</html>