親要素に対して子要素を7対3で横並びにしたい

前提・実現したいこと

現在、参考書を読みながらHTMLとcssの勉強中です。
子要素のbox3とbox4を親要素であるboxAに対して7対3の割合で横並びにしたいのですが、どうしてもできません。
おそらくcssがおかしいのだと思いますがどこがおかしいかわかりません。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

box3とbox4を７対３で横並びにできない

該当のソースコード

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/practice.css">
    <title>サンプル　練習用</title>
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <div class="box1">

      <!-- サイト名 -->
      <div class="site">
        <h1><a href="#">TimeSwitch</a></h1>
      </div>

    </div>

    <div class="box2">

      <!-- ナビゲーション -->
      <nav class="menu">
        <ul>
        <li><a href="#">トップ</a></li>
        <li><a href="#">雑貨</a></li>
        <li><a href="#">ガジェット</a></li>
        <li><a href="#">お出かけ</a></li>
        <li><a href="#">食べ物</a></li>
        <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>

      </div>


    <div class="boxA">
      <div class="box3">
        <!-- 記事 -->
        <article class="kiji">
          <h1>もぎたてトマトをおいしく食べたい！</h1>
          <p><img src="sample/img/03/tomato.jpg" alt=""></p>
          <p>もぎたてトマトを食べたくなって、ちょっと郊外にあるトマト農家さんの直売所まで行ってきました。ここのトマトは新鮮で、美味しくて、お安い、というとってもお買い得なトマトなんです。</p>
          <p>もぎたての新鮮なトマトは、ヘタが緑色でみずみずしく、シャキッといいます。赤い実は皮がピンと張り、つるっと丸いものがいいのだとか。糖度の高いトマトは水に沈むそうですが、なんでも甘ければいいというものではないので、好みの味のトマトを作る農家さんを見つけたいところです。</p>
          <p>何と言っても、もぎたてトマトは水洗いしてそのまま食べるのが一番です。暑い日に美味しいトマトにかぶりつくと、それだけで幸せになります。水分補給もできるので一石二鳥です。</p>
          <p>もちろん、何かをつけたり、かけたりして食べるのももちろん美味しいです。  定番としては、塩、砂糖、マヨネーズ、オリーブオイルなどがおすすめ。</p>
        </article>
      </div>

      <div class="box4">
          　<!-- 特集記事 -->
            <aside class="sidemenu">
              <h1>特集記事</h1>
              <ul>
              <li><a href="#">わかりやすい地図の読み方</a></li>
              <li><a href="#">苗から始めるトマト作り</a></li>
              <li><a href="#">料理とスマホの便利な機能</a></li>
              <li><a href="#">バッテリーを長持ちさせる方法</a></li>
              </ul>
            </aside>
            <!-- おすすめ記事 -->
            <aside class="osusume">
              <h1>おすすめ記事</h1>
              <ul>
              <li><a href="#">はじめてのフラワーアレンジメント</a></li>
              <li><a href="#">古い端末がでてきたので充電してみたら・・・</a></li>
              </ul>
            </aside>
            <!-- 人気記事 -->
            <aside class="ninki">
              <h1>人気記事</h1>
              <ul>
              <li><a href="#">花好きにはおすすめの鑑賞スポット</a></li>
              <li><a href="#">通話アプリの便利な使い方</a></li>
              <li><a href="#">森林浴＆温泉を満喫するならここ！</a></li>
              <li><a href="#">世界各地の買い物袋</a></li>
    　        <li><a href="#">部屋を彩るカラフルな家具</a></li>
              <li><a href="#">海の中で出会ったものたち</a></li>
              </ul>
            </aside>
      </div>

    </div>

      <div class="box5">
        <div class="copyright">
          <p>TimeSwitchは毎日の生活で気になることを書き留めているブログです</p>
          <p>copyright &copy; TimeSwitch</p>
        </div>
      </div>




  </body>
</html>

css
1@charset "UTF-8";
2
3
4body{
5  font-family: 'メイリオ',
6  'Hiragino Kaku Gothic Pro',sans-serif;
7  box-sizing: border-box;
8  margin: 0;
9}
10
11
12/* サイト名 */
13.site h1 a {
14  text-decoration: none;
15  color: #000000;
16}
17
18.site h1 {
19  margin: 0;
20  font-size: 30px;
21}
22.box2:after{
23  content:"";
24  display:block;
25  clear: both;
26}
27/* ナビゲーション */
28.menu ul{
29  margin: 0;
30  padding:0;
31  list-style: none;
32}
33
34.menu li {
35  float: left;
36  width:auto;
37}
38
39.menu li a {
40  display: block;
41  padding:5px;
42  color:#000000;
43  font-size:14px;
44  text-decoration: none;
45}
46
47.menu li a:hover {
48  background-color: #eeeeee
49}
50
51.menu ul :after {
52  content:"";
53  display: block;
54  clear: both;
55}
56
57/* 記事 */
58.kiji h1 {
59  margin-top: 0;
60  margin-bottom: 20px;
61  font-size: 36px;
62}
63
64.kiji p{
65  margin-top:0;
66  margin-bottom: 20px;
67}
68
69.kiji img{
70  max-width: 100%;
71  height:auto;
72}
73/* 特集記事 */
74.sidemenu {
75  margin-bottom:30px;
76}
77.sidemenu ul{
78  margin:0;
79  padding: 0;
80  list-style: none;
81}
82.sidemenu li a {
83  display:block;
84  padding:5px;
85  color:#000000;
86  font-size: 14px;
87  text-decoration: none;
88}
89.sidemenu li a:hover{
90  background-color: #eeeeee
91}
92.sidemenu h1{
93  margin-top:0px;
94  margin-bottom:10px;
95  border-bottom:dotted 2px #dddddd;
96  color:#666666;
97  font-size: 18px;
98}
99/* おすすめ記事 */
100.osusume {
101  margin-bottom:30px;
102}
103.osusume ul{
104  margin:0;
105  padding:0;
106  list-style:none;
107}
108.osusume li a{
109  display:block;
110  padding:5px;
111  color:#000000;
112  font-size: 14px;
113  text-decoration:none;
114}
115.osusume li a:hover{
116  background-color: #eeeeee;
117}
118.osusume h1{
119  margin-top:0;
120  margin-bottom:10px;
121  border-bottom:dotted 2px #dddddd;
122  color: #666666;
123  font-size: 18px;
124}
125/* 人気記事 */
126.ninki ul	{
127  margin: 0;
128	padding: 0;
129	list-style: none
130}
131
132.ninki li a	{
133  display: block;
134	padding: 5px;
135	color: #000000;
136	font-size: 14px;
137	text-decoration: none
138}
139
140.ninki li a:hover	{
141  background-color: #eeeeee
142}
143
144.ninki h1	{
145  margin-top: 0;
146	margin-bottom: 10px;
147	border-bottom: dotted 2px #dddddd;
148	color: #666666;
149	font-size: 18px
150}
151
152
153/* コピーライト */
154.copyright p {
155  margin:0;
156  color:#666666;
157  font-size: 14px;
158}
159
160
161  /* box3とbox4を横並びにする設定 */
162@media (min-width:768px;) {
163.boxA:after{
164  content: "";
165  display: block;
166  clear: both;
167}
168.box3 {
169  float:left;
170  width:70%;
171}
172.box4{
173  float: right;
174  width:30%;
175}
176}
177

試したこと

clearfixは入力しています。

補足情報（FW/ツールのバージョンなど）

該当するコードは一番下だとは思いますが、参考書のコードと全く同じです。

dit.

2019/07/12 01:16

提示のコードを試した結果ウィンドウサイズが768px以上の時に横並びになりました。状況が再現できません。「横並び」以外のスタイルは効いていますか？また、キャッシュクリアなどは試されましたか？

Clo_wN

2019/07/12 10:12

横並びにならない状況が再現できないということで、全コードを載せました。あと、キャッシュクリアは行いました。

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

回答3件

CSS
1@media (min-width: 768px) {
2  /* BOX3とBOX4を横に並べる設定 */
3  .boxA:after {
4    content: "";
5    display: block;
6    clear: both;
7  }
8
9  .box3 {
10    float: left;
11    width: 70%;
12  }
13
14  .box4 {
15    float: left;
16    width: 30%;
17  }
18}

上記の部分で７：３を指定していますが、これは画面のサイズが768px以上になった時に
適用されるものになります。
@media (min-width: 768px)の部分ですね。

横並びにならないのは、768px未満の時なのでそのサイズで確認されてるんじゃありませんか？

投稿2019/07/12 02:01

編集2019/07/12 02:03

root_jp

総合スコア4666

Clo_wN

2019/07/12 10:11

回答ありがとうございます。サイズは全画面表示で見てるのですが横並びになりません。コードを全て載せてみましたのでもし可能であれば確認いただけないでしょうか。

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

想定している対象ブラウザにもよりますが、floatではなくflexboxを利用してはどうでしょうか？

css
1/* BOX3とBOX4を横に並べる設定 */
2.boxA    {display:flex;}
3
4.box3    {flex: 7;}
5
6.box4    {flex: 3;}

投稿2019/07/12 02:03

編集2019/07/12 02:04

k.tada

総合スコア1679

Clo_wN

2019/07/12 08:29

回答ありがとうございます。flexbox参考にします。

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

自己解決

解決しました。参考書のcssと自分が書いたcssを一行一行見比べたところ、、、

css
1@media(min-width:768px;){

となっており、pxの後のセミコロンがいりませんでした。
凡ミスです。

投稿2019/07/12 12:42

Clo_wN

総合スコア11

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！