floatを利用してサイドバーとメインを横並びにしたい

前提・実現したいこと

サイドバー（カテゴリー、オンラインショップへ）の一覧を左へ
メインは、商品の画像と名前、値段を書いたカードを２，３枚横並びにして右側に配置したいです。
(3枚以上のカードは下へと配置）

コードにもあるintroductionとsidebarにfloatを適応させて上記の条件を満たしたいのですが、
フッターにメインのカードが食い込むなどしておかしな表記になります。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <!-- Required meta tags -->
5        <meta charset="utf-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7        <!-- Bootstrap CSS -->
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
9        <title>test</title>
10            </head>
11    <body>
12    <!-- Optional JavaScript -->
13    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
14    <link rel="stylesheet" type="text/css" href=https://rmultigamingsever.com/wp-content/themes/hp_sakusei/reset.css>
15    <link rel="stylesheet" href="style.css">
16    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
17    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
18    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
19
20    <!-- header -->
21        <header class="navbar bg-dark shadow navbar-light fixed-top navbar-expand-md">
22            <div class="container-fluid px-0 pr-3">
23                <div class="">
24                    <h1><a class="nav-link navbar-brand text-white" href="#">taitoru</a></h1>
25                </div>
26                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
27                <span class="navbar-toggler-icon"></span>
28                </button>
29                <div class="collapse justify-content-center navbar-collapse" id="navbarSupportedContent">
30                    <ul class="nav row">
31                        <a class="nav-link text-white col-md" href="#">HOME</a>
32                        <a class="nav-link text-white col-md" href="#">INTRODUCTION</a>
33                        <a class="nav-link text-white col-md" href="#">SERVICES</a>
34                        <a class="nav-link text-white col-md" href="#">PROFILE</a>
35                        <a class="nav-link text-white col-md" href="#">CONTANCT</a>
36                    </ul>
37                </div>
38            </div>
39        </header>
40
41        <!-- introduction -->
42        <main class="container mt-5 mb-5 p-5 justify-content-center">
43            <h1 class="h3 mb-3">商品紹介</h1>
44            <div class="sidebar">
45                <ul class="w-25">
46                    <a class="list-group-item disabled"href="#">カテゴリー</a>
47                    <a class="list-group-item list-group-item-action text-center"href="#">梅干し</a>
48                    <a class="list-group-item list-group-item-action text-center"href="#">みかん</a>
49                    <a class="list-group-item list-group-item-action text-center"href="#">その他</a>
50                </ul>
51                <div class="w-25 mt-4">
52                    <button type="button" class="btn btn-success btn-lg onlineshop-font-size" name="button">オンラインショップへ<br><span>Online Shop</span></button>
53                </div>
54            </div>
55            <div class="container introduction">
56                <div class="row w-75">
57                    <div class="card w-25 shadow">
58                        <img class="card-img-top p-2 mb-2" src="img/mikan.PNG" style="max-width: 25rem;">
59                        <div class="cardbody">
60                            <h4 class="card-title p-2">梅干し</h4>
61                            <h4 class="card-subtitle p-2">1000円</h4>
62                        </div>
63                    </div>
64                </div>
65            </div>
66        </main>
67
68        <!-- footer -->
69        <footer class="shadow-lg">
70            <div class="container-fulid">
71                <div class="row bg-light p-5 justify-content-center">
72                    <div class="h4 pr-5 font-weight-bold text-success float-left">
73                        <p>taitoru</p>
74                    </div>
75                    <div class="h6 font-weight-light float-right">
76                        <p>【本社】</p>
77                        <p>〒00000000  じゅうしょがはいる</p>
78                        <p>電話  999-9999-9-9-9</p>
79                        <p>【支店名】</p>
80                        <p>〒０００００  じゅうしょがはいる</p>
81                        <p>電話  999^909909-9</p><br>
82                        <p>COPYRIGHT (C) 2019 aaaaaaaaaaaaaaaaa.</p>
83                    </div>
84                </div>
85            </div>
86        </footer>
87    </body>
88</html>
89

css
1body {
2    font-family: Verdana, 'Arial Black', sans-serif;
3    margin: 0;
4}
5
6/* header */
7header {
8    width: 100%;
9}
10header a:hover {
11    opacity: 0.7;
12    display: block;
13}
14.navbar-toggler .navbar-toggler-icon {
15  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
16}
17.navbar-toggler{
18  border-color: black;
19}
20#navbarSupportedContent{
21    margin-right: 250px;
22}
23ul {
24    width: 800px;
25}
26@media(min-width:768px){
27    ul a {
28    text-align: center;
29}
30}
31
32/* profile */
33main {
34    margin-top: 50px;
35}
36/* contact */
37main .font-size {
38    font-size: 12px;
39}
40.contact-img {
41    background-image:url(img/phone.png);
42}
43.contact-title{
44    box-shadow: 5px 5px rgba(0,0,0,0.2)
45}
46.contact-img h1 {
47    line-height: 1.5rem;
48}
49
50.contact-form {
51    line-height: 30px;
52}
53/* introduction */
54.onlineshop-font-size {
55    font-size: 1rem;
56}
57.sidebar {
58    position: -webkit-sticky;
59    position: sticky;
60    top: 146px;
61    float: left;
62}
63.introduction {
64    float:right;
65}
66/* footer */
67

試したこと

floatをintroduction,sidebarに適応するもフッターにカードが被る
bootstrapで同様のことをするが上に同じくおかしな表記になる

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

Windows10　bootstrap4

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

回答1件

ベストアンサー

問題が多すぎるため基礎を学んで、1から作り直したほうが良いです。

.shadow-lgにclear: bothが付けられていない、
ulに800pxが指定されている
bootstrapのclassの付け方が間違っている

など多数の間違いあり。

投稿2019/06/29 12:06

yasutomi

総合スコア2937

HozDer

2019/06/29 15:41

返信ありがとうございます。 ulはheaderに対するulをそのまま適応されてたみたいです　修正しました。 clear: bothをつけ足してカードの位置自体は希望通りになりましたがそれでもなおサイドバーのCSSが崩れます　 yasutomiさんの言う通りbootstrapのclassのつけ方を見直すか、1からやり直します。

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