Media Queries Through CSS

Creating a responsive site using media queries through the CSS method.

HTML

<!DOCTYPE html>
<html>

	<head>
		<title>PERFECT MATCH</title>
		<link type="text/css" rel="stylesheet" href="style.css"/>
		<meta name="viewport" content="width=device-width, initial=1.0">
	</head>

	<body background: red>
		<div id="container">
			<div id="header">
				<b id="perfect_title">Perfect Match</b>
			</div>
			<img src="girl 1.png"/>
			<img src="girl 2.png"/>
			<img src="girl 3.png"/>
			<img src="girl 4.png"/>
			<footer>&copy; Copyright 2018</footer>
		</div>
	</body>

</html>

CSS

#container{
	width: auto;
	margin: 0px auto;
}

#header{
	width: auto;
	margin: 0px;
	height: 100px;
	background-color: #d30b60;
}

#perfect_title{
	text-align: center;
	font-size: 30px;
}

.img{
	width: 200px;
	float: center;
}