画面幅が変わったときに要素を横並びにしたい。

pc画面では横並びになってるのに画面幅が600pxになったときにはshareの部分が縦並びになってしまいます。画面幅が600pxになったときに要素を二つずつ横並びにしたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>paspol模写</title>
7  <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10  <header>
11    <div class="small-header-left"><img src="img/siteLogo-small@2x.png"></div>
12    <div class="header-left">
13      <img src="./img/siteLogo-pc@2x.png">
14    </div>
15    <div class="header-right">
16      <li><a href="">TOP</a></li>
17      <li><a href="">PRODUCT</a></li>
18      <li><a href="">ABOUT</a></li>
19      <li><a href="">NEWS</a></li>
20      <li><a href="">CONTACT</a></li>
21    </div>
22    </div>
23  </header>
24
25  <section class="main">
26    <h1>旅に出よう。</h1>
27
28    <div class="container">
29    <p>僕たちが作りたいのは<br>
30      持っているだけで旅に出たくなるモノ。<br>
31      持っているだけでわくわくするモノ。
32    </p>
33
34    <p>それは新しい時代の “パスポート”<br>
35        僕たちが作るものは、<br>
36        そんな、存在でありたい。
37    </p>
38
39    <p>そして、人と人が繋がる<br>
40        こんな時代だからこそ、<br>
41        僕たちは、みんなでひとつのモノを<br>
42        作ることを追求したい。
43    </p>
44
45    <h1 class="paspol">PAS-POL</h1>
46
47    <p>それは、自分と世界を繋げる<br>
48        旅のモノづくりブランド
49    </p>
50  </div>
51  </section>
52
53  <section class="product">
54    <div class="container">
55      <div class="title-more">
56        <div class="title">
57          <h1>PRODUCT</h1>
58        </div>
59        <div class="more">
60          <a href="" class="more-btn">MORE</a>
61        </div>
62      </div>
63      <div class="pic">
64          <div class="pic-common">
65            <a href="">
66              <img src="img/fes001t.png">
67              <h1>The World<br>Festial Guide - 海外の音楽フェス完全ガイド -</h1>
68            </a>
69          </div>
70          <div class="pic-common">
71            <a href="">
72              <img src="img/banner_サムネイル21.png">
73              <h1>この世界で死ぬまでにしたいこと2000</h1>
74            </a>
75          </div>
76          <div class="pic-common">
77            <a href="">
78              <img src="img/365日本カレンダー_サムネイル1.png">
79              <h1>365日日本一周　絶景日めくりカレンダー</h1>
80            </a>
81          </div>
82          <div class="pic-common">
83            <a href="">
84              <img src="img/passportnotebook-thumb11.png">
85              <h1>PASSPORT<br>NOTEBOOK<br>series</h1>
86            </a>
87          </div>
88          <div class="pic-common">
89            <a href="">
90              <img src="img/englishbook-thumb11.png">
91              <h1>ひとり旅英会話<br>BOOK</h1>
92            </a>
93          </div>
94          <div class="pic-common">
95            <a href="">
96              <img src="img/212465b615e458e672a9e0a1cbb1acf1.jpg">
97              <h1>日本の絶景ポストカード　春編</h1>
98            </a>
99          </div>
100        </div>
101        <div class="more-2">
102          <a href="" class="more-btn">MORE</a>
103        </div>
104      </div>
105    </div>
106  </section>
107
108  <article class="news">
109    <div class="container">
110      <div class="title-more">
111        <div class="title">
112          <h1>NEWS</h1>
113        </div>
114        <div class="more">
115          <a href="" class="more-btn">MORE</a>
116        </div>
117      </div>
118      <div class="pic-2">
119        <div class="pic-inner-1 pic-common">
120          <img src="img/アンケートアイキャッチ.jpg">
121        </div>
122  
123        <div class="pic-inner-2 pic-common">
124          <img src="img/写真バナー.jpg">
125        </div>
126  
127        <div class="pic-inner-3 pic-common">
128          <img src="img/pickup3_アートボード-1.jpg">
129        </div>
130  
131        <div class="pic-inner-4 pic-common">
132          <img src="img/僕が旅人になった日_new.jpg">
133        </div>
134  
135        <div class="pic-inner-5 pic-common">
136          <img src="img/pickup2_アートボード-1.jpg">
137        </div>
138  
139        <div class="pic-inner-6 pic-common">
140          <img src="img/pickup-02.jpg">
141        </div>
142  
143      </div>
144      <div class="more-2">
145        <a href="" class="more-btn">MORE</a>
146      </div>
147    </div>
148  </article>
149
150  <section class="share">
151    <div class="share-item">
152      <a href="" class="facebook">Share on Facebook</a>
153    </div>
154    <div class="share-item">
155      <a href="" class="twitter">Share on Twitter</a>
156    </div>
157    <div class="share-item">
158      <a href="" class="bookmark">Hatena Bookmark</a>
159    </div>
160    <div href="" class="share-item line">
161      <a href="">Send to LINE</a>
162    </div>
163  </section>
164
165  <section class="info">
166    <div class="container">
167      <li><a href="">TOP</a></li>
168      <li><a href="">PRODUCT</a></li>
169      <li><a href="">ABOUT</a></li>
170      <li><a href="">NEWS</a></li>
171      <li><a href="">CONTACT</a></li>
172    </div>
173  </section>
174
175  <footer>
176    <div class="container">
177      <img src="img/siteLogo-small@2x.png">
178      <small>Copyright © 2019 PAS-POL -旅のモノづくりブランド-｜TABIPPO All rights reserved.</small>
179    </div>
180  </footer>
181</body>
182</html>

css
1body {
2  margin:0;
3  font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
4  background-color: #fff;
5  color: #13191b;
6  line-height: 1.7;
7  font-size: 13px;
8}
9
10div {
11  display:block;
12}
13
14li {
15  list-style:none;
16}
17
18a {
19  text-decoration:none;
20}
21
22header {
23  background-image:url(img/main_visual_7-0x0.jpg);
24  height:580px;
25  display:flex;
26  justify-content:space-between;
27}
28
29.small-header-left {
30  display:none;
31  margin:0 auto;
32  margin-top:100px;
33}
34
35.small-header-left img {
36  width:90px;
37}
38
39.header-left {
40  margin-top:50px;
41  margin-left:7%;
42}
43
44.header-left img {
45  width:266px;
46  height:72px;
47}
48
49.header-right { 
50  display:flex;
51  margin-top:80px;
52  margin-right:7%;
53}
54
55.header-right li:not(:last-of-type) {
56  margin-right:30px;
57}
58
59.header-right li :hover {
60  border-bottom:2px solid white;
61  padding-bottom:10px;
62}
63
64.header-right a {
65  color:white;
66}
67
68.main {
69  padding:110px 0;
70  background-color:#f6f6f6;
71}
72
73.main h1 {
74  font-size:44px;
75  font-weight:normal;
76  text-align:center;
77  margin:0 auto;
78}
79
80.main .container {
81  margin:70px auto 0 auto;
82  max-width:370px;
83  font-size:20px;
84}
85
86.paspol {
87  text-align:center;
88  font-size:35px;
89}
90
91.product {
92  margin-bottom:130px;
93  padding-top:60px;
94  padding-bottom:60px;
95  margin:0 7%;
96}
97
98.product .container {
99  max-width: 786px;
100  margin:0 auto;
101  padding:0 7%;
102}
103
104.product .title-more {
105  padding-bottom:10px;
106  display:flex;
107  justify-content:space-between;
108}
109
110.title h1 {
111  font-size:30px;
112  font-weight:normal;
113}
114
115.more {
116  line-height:100px;
117}
118
119.more a {
120  color:black;
121}
122
123.more-btn {
124  border:solid 1px black;
125  padding:17px 60px;
126  transition-property: background-color,color;
127  transition-duration: 0.5s;
128}
129
130.more-btn:hover {
131  background-color:black;
132  color:white;
133}
134
135.more-2 {
136  line-height:100px;
137  display:none;
138}
139
140.more-2 a {
141  color:black;
142}
143
144.more-btn-2:hover {
145  background-color:black;
146  color:white;
147}
148
149.pic {
150  display:flex;
151  flex-wrap:wrap;
152}
153
154.pic h1 {
155  margin: 20px 0 0;
156  padding: 0 20px;
157  font-size: 20px;
158}
159
160.pic .pic-common {
161  width:33.33333%;
162  padding:0 15px;
163  transition-property:opacity,color;
164  transition-duration: 0.5s;
165  box-sizing:border-box;
166}
167
168.pic .pic-common:hover {
169  opacity:0.7;
170}
171
172.pic .pic-common h1 {
173  color:black;
174}
175
176.pic .pic-common img{
177  width: 100%;
178  height: auto;
179  vertical-align: top;
180}
181
182.news {
183  background-color:#f6f6f6;
184  margin:0 auto;
185  padding:0 7%;
186  padding-top:60px;
187  padding-bottom:60px;
188}
189
190.news .container {
191  max-width:786px;
192  padding:0 7%;
193  margin:0 auto;
194}
195
196.news .title-more {
197  padding-bottom:90px;
198  display:flex;
199  justify-content:space-between;
200}
201
202.pic-2 > .pic-common > img {
203  width:325px;
204  height:170px;
205}
206
207.pic-2 > .pic-common {
208  padding-bottom:150px;
209}
210
211.share {
212  text-align:center;
213  padding:35px 0;
214}
215
216.share a {
217  display: inline-block;
218  width: 162px;
219  height: 46px;
220  line-height: 48px;
221  font-size: 14px;
222  color: #13191b;
223  border: 1px solid #13191b;
224  text-align: center;
225  font-family: "Gill Sans Std Book", sans-serif;
226  letter-spacing: 0.1em;
227}
228
229.share-item {
230  margin:0 15px;
231  display: inline-block;
232  vertical-align: top;
233}
234
235.facebook {
236  color: #4871a9;
237  border-color: #4871a9;
238}
239
240.twitter {
241  color: #70bdd3;
242  border-color: #70bdd3;
243}
244
245.bookmark {
246  color: #2f9bcd;
247  border-color: #2f9bcd;
248}
249
250.line {
251  color: #8ec09d;
252  border-color: #8ec09d;
253  display:none;
254}
255
256.info {
257  background-color:#939899;
258  padding:40px;
259  cursor:pointer;
260}
261
262.info .container {
263  display:flex;
264  justify-content:center;
265}
266
267.info .container a {
268  color:white;
269}
270
271.info .container li {
272  margin-right:40px;
273}
274
275.info .container li:hover {
276  opacity:0.5;
277}
278
279footer {
280  background-color:#656C6E;
281  color:white;
282  padding:35px 0;
283}
284
285footer .container {
286  max-width:786px;
287  margin:0 auto;
288  display:flex;
289  justify-content:space-between;
290  padding:0 7%;
291}
292
293footer img {
294  width:90px;
295}
296
297footer small {
298  margin-top:35px;
299}
300
301@media (max-width:600px) {
302  .line {
303    display:inline-block;
304    vertical-align: top;
305  }
306  
307  .share {
308    padding-left: 9%;
309    padding-right: 9%;
310    margin-left: -15px;
311    margin-right: -15px;
312  }
313
314  .share-item {
315    margin: 5px 0;
316    padding: 0 5px;
317    width: 49.5%;
318  }
319
320  .share a {
321    width: 100%;
322  }
323
324  .info {
325    padding:0;
326  }
327
328  .info .container {
329    display:block;
330    margin:0 auto;
331    text-align:center;
332  }
333
334  .info .container li {
335    padding:18px 0;
336  }
337
338  .info .container li:not(:last-of-type) {
339    border-bottom:1px solid white;
340  }
341
342  footer .container {
343    display:block;
344    margin:0 auto;
345  }
346
347  footer img {
348    margin:0 auto;
349  }
350
351  footer small {
352    text-align:center;
353  }
354}
355

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

回答2件

css
1@media (max-width:600px) {
2
3 /*.share {
4    padding-left: 9%;
5    padding-right: 9%;
6    margin-left: -15px;
7    margin-right: -15px;
8  }
9
10  .share-item {
11    margin: 5px 0;
12    padding: 0 5px;
13    width: 49.5%;
14  }
15
16  .share a {
17    width: 100%;
18  } */
19}