can't change h1 font-size in print preview

I can't change h1 font-size in print preview. although every other property works, the font size doesn't work.

body{
	margin: 1%;
	padding:1%;
	background-color: rgba(0,0,255,.2);
	font-size: 100%;
	min-width: 500px;

}
header, footer{
  background-color:#0066FF;
  padding: 1%;
  margin: 1%;
}
header h1{
	font-size: 3rem;
	color:rgba(0,0,0,.7);;

}

section{
  margin:1%;
    padding:1%;
}

nav a{
	display:block;
	background-color: white;
	border: 1px solid black;
	text-align: center;
	border-radius: 35px;
	text-decoration: none;
	padding: 2%;
	margin: 1%;
}

h1{
	text-align: center;
	color:rgba(255,0,0,.7);;
}


.myClass{
	margin: 0em 1em;
	padding:.75em;
	border: 1px solid black;
	border-radius: .25%;

	/* Safari and Chrome */
	-webkit-column-count:3;
	-moz-column-count: 3;
	column-count:3;

}



ol{
	list-style:upper-roman;
	margin:1em;
}
img{
	display: none;
}

footer{
	clear: both;
	text-align:center;
	text-transform: uppercase;
}


@media screen and (min-width: 600px) {
	img{
		display: inline-block;
		width: 20%;
		margin-right: 4%;
	}

	section {
		display: inline-block;
		vertical-align: top;
	}
	#left {
		width: 20%;
	}

	#center {
		width : 70%;
	}

	#center div:last-of-type{
		width: 100%;
		padding:.75em;
		padding-left: 0;
		margin: 0em 1em;
	}
	h2 {
		font-size: 1.7em;
	}
	h1::after {
		content: "(I guess...)";
	}

	h3 {
		height: 35px;
		line-height: 35px;
		font-size: 1.6em;
		font-weight: bolder;

	}

	#center div p {
		height: 45px;
		line-height: 45px;
		font-size: 1.6em;
	}

	header , footer {
		background-color: initial;
	}

	footer {
		width: 70%;
		float: right;
	}

	footer p {
		text-align: left;
	}


}

@media print {

	nav a {
	display:block;
	background-color: white;
	border: 0;
	text-align: center;
	border-radius: 0;
	text-decoration: none;
	padding: 0;
	margin: 0;
	}

		h1 {

		font-style: italic;
		font-weight: bolder;
		font-size: 16px;
	}

}

<!-- 
Create a stylesheet that will style the page 
as it appears in the example. -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Design Lab</title>
      <link rel="stylesheet" type="text/css" href="responsive.css"/>
<meta charset = "UTF-8">
</head>
<!--  DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->

<header>
	<h1> Web Design is Awesome!!!</h1>
	<nav>
		<a href="http://www.umich.edu/">University of Michigan</a>
		<a href="http://www.intro-webdesign.com/">Intro to Web Design</a>
	</nav>
  </header>

  <footer>
  	<p>Sample code for Responsive Design .<br/> Colleen van Lent</p>
  </footer>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
   
</body>
</html>

Solution

Try using em, px, or a a percent value.

h1 {
font-size: 24px;
font-size: 200%;
font-size: 1.5em;
}

The percentage will depend on what the default text size is. Usually the default size is 16px.