レスポンシブ対応のエラーの解決

レスポンシブ対応をしようと思ったのですが、うまくいきません。

デバイスが７６８pxの横幅の時に適用したいと思っています。
載せていただいた写真を作りたいと思っています。
<contents>を縦に3つ中央揃えでしたいと思っています。

cssの@media内の<contents>にmarin:50px auto;を指定してもうまくいきませんでした。

html
1コード<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="UTF-8">
5	<title>課題問題</title>
6    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7	<link rel="stylesheet" type="text/css" href="check.css">
8</head>
9<body>
10	<div class="contents">
11		<div class="content">
12			<span class="step">step1</span>
13		    	<div class="content-img1"></div>
14		    	<h3 class="content-title">タイトルが入ります</h3>
15		    	<p class="text">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
16		</div>
17
18		<div class="content">
19			<span class="step">step2</span>
20		    	<div class="content-img2"></div>
21		    	<h3 class="content-title">タイトルが入ります</h3>
22		    	<p class="text">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
23		</div>
24
25		<div class="content">
26			<span class="step">step3</span>
27			    <div class="content-img3"></div>
28			    <h3 class="content-title">タイトルが入ります</h3>
29			    <p class="text">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
30	    </div>
31	</div>
32</body>
33</html>

CSS
1*{
2	padding: 0px;
3	margin:0;
4	box-sizing: border-box;
5
6}
7.contents{
8	width:960px;
9	margin:50px auto;
10}
11.content{
12	width: 300px;
13	padding:10px;
14	border:1px solid #eee;
15	position: relative;
16	margin-right: 30px;
17	float:left;
18
19}
20.content:last-child{
21	margin-right:0;
22}
23.content-img1{
24    background-image: url(img.9/flow01.png);
25    background-position: bottom;
26    background-size: cover;
27    height:150px;
28}
29.content-img2{
30	background-image: url(img.9/flow02.png);
31	background-position: bottom;
32    background-size: cover;
33	height:150px;
34}
35.content-img3{
36	background-image: url(img.9/flow03.png);
37	background-position: bottom;
38    background-size: cover;
39	height:150px;
40}
41.step{
42    background:  #FF9A4B;
43    color:#fff;
44    position: absolute;
45    top:0px;
46    left: 0px;
47    padding:3px;
48
49}
50.content-title{
51	padding-top: 15px ;
52    padding-bottom: 5px
53}
54
55@media screen and (max-width: 768px){
56.contents{
57	margin:0 auto;
58}
59.content{
60	float:none;
61	width:90%;
62}
63}
64

行動規範の内容に同意します

回答1件

ベストアンサー

こちらでいかがでしょうか?

CSS
1@media screen and (max-width: 768px) {
2  .contents {
3    margin: 0 auto;
4    width: 90%;
5  }
6  .content {
7    float: none;
8    /* width: 90%; */
9    width: 100%; 
10  }
11}