ロゴtitleとnavバーが重なってしまいます

htmlをcssでコーディングしているのですが、ロゴtitleとnavバーが重なってしまい、尚且つnavのリストが中央に配置してくれません。。
検証ツールなどをみて、.h-navに下記のコードを書いたりしたのですが、重なりが取れませんで、リストも中央に配置できませんでした。。

添付のように左上にtitleロゴ、navを横並びにさせたいと思っております。
説明が不足しており失礼いたしました。。

![イメ96224feab391d1dd644c1fd81c1d2668.jpeg)

　　display: block;
list-style-type: disc;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

恐れ入ります。あまりにも初心者で大変恐縮なのですが、根本的にどこが誤っているのかご教示いただけたら幸いです。
どうぞよろしくお願いいたします。

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.0">
6    <title>TEST2</title>
7    <link rel="stylesheet" href="style.css">
8    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
9    
10</head>
11<body>
12    <div class="container">
13        <header class="header">
14            <div class="h-title">
15                <img class="h-logo" src="images/logo.png" alt="title">
16            <nav class="h-nav">
17                <ul class="h-menu">
18                    <li class="h-list">
19                        <div class="h-1-box">
20                            <div class="h-1-top">
21                                ホーム
22                            </div>
23                            <div class="h-1-bottom">
24                                HOME
25                            </div>
26                        </div>
27                    </li>
28                    <li class="h-list">
29                        <div class="h-1-box">
30                            <div class="h-1-top">
31                                カンパニー
32                            </div>
33                            <div class="h-1-bottom">
34                                COMPANY
35                            </div>
36                        </div>
37                    </li>
38                    <li class="h-list">
39                        <div class="h-1-box">
40                            <div class="h-1-top">
41                                サービス
42                            </div>
43                            <div class="h-1-bottom">
44                                SERVICE
45                            </div>
46                        </div>
47                    </li>
48                    <li class="h-list">
49                        <div class="h-1-box">
50                            <div class="h-1-top">
51                                採用情報
52                            </div>
53                            <div class="h-1-bottom">
54                                RECRIT
55                            </div>
56                        </div>
57                    </li>
58                    <li class="h-list">
59                        <div class="h-1-box">
60                            <div class="h-1-top">
61                                リンク
62                            </div>
63                            <div class="h-1-bottom">
64                                LINK
65                            </div>
66                        </div>
67                    </li>
68                    <li class="h-list">
69                        <div class="h-1-box">
70                            <div class="h-1-top">
71                                お問い合わせ
72                            </div>
73                            <div class="h-1-bottom">
74                                CONTACT
75                            </div>
76                        </div>
77                    </li>
78                    
79                </ul>
80            </nav>
81            <div class="h-imagebox">
82                <img src="images/1.jpg" alt="ヘッダーの画像">
83            </div>
84        </div>
85    </header>
86        <main class="main">
87            main
88        </main>
89        <aside class="side">
90            side
91        </aside>
92        <footer class="footer">
93            footer
94        </footer>
95    </div>
96</body>
97</html>

css
1
2
3html,body{
4    height: 100%;
5    background: #a8a6a6;
6}
7
8
9/*コンテナー
10---------------------------------------------------------------------------*/
11.container {
12    width: 1200px;
13    height: 100%;
14    min-height: 100%;
15    background: white;
16    margin: 0 auto;
17}
18
19/*ヘッダー
20---------------------------------------------------------------------------*/
21
22/*ロゴ画像設定*/
23.h-title {
24    height: 100px;
25    border-top: 5px solid blue;
26    position: relative;
27}
28
29.h-title .h-logo{
30    width: 300px;
31    position: absolute;
32    top: 50%;
33    left: 4%;
34    transform: translateY(-50%)
35}
36
37
38
39.h-menu{
40    letter-spacing: -.4em;
41}
42
43
44.h-list{
45    display: inline-block;
46    width: 16.6%;
47    position: relative;
48    letter-spacing: normal;
49    height: 84px;
50    border-right: 1px solid #d2d2d2;
51    box-sizing: border-box;
52}
53.h-1-box{
54    position: absolute;
55    top: 50%;
56    left: 50%;
57    transform: translate(-50% -50%);
58}
59
60
61
62.main{
63    background: blue;
64    float: left;
65    width: 70%;    
66}
67
68.side{
69    background: green;
70}
71
72.footer{
73    background:pink;
74}

Lhankor_Mhy

2020/12/28 08:47

補足願います。「ロゴtitleとnavバーが重なってしまい」とのことですが、どのように配置される想定だったのですか？「navのリストが中央に配置してくれません」とのことですが、具体的には「何に対して」「何を」「水平垂直どちらの方向で」中央配置したいのでしょうか？

nmamaworker

2021/01/04 02:23

年末年始でpcがイジれずご返信が遅れまして恐縮です。再度、質問に添付を付けまして更新させていただきました。もし今からでもご教示いただけたらありがたいです。でも自分でも解決の道を探ってみます。ありがとうございます。

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

回答2件

自己解決

すみません。。解決できました。
htmlのcodeのh-titleクラスの閉じタグ（</div>）を、h-logoクラスのimgタグの直後に持ってきたら解決できました。。
一つ一つ落ち着いて見ていきます。
ありがとうございました。

投稿2021/01/04 05:31

nmamaworker

総合スコア1

とりあえず、明らかな間違いは下記です。

css
1.h-1-box{
2    position: absolute;
3    top: 50%;
4    left: 50%;
5/*    transform: translate(-50% -50%); ここ */
6    transform: translate(-50%, -50%); /* カンマが必要 */
7}

あと、「ロゴtitleとnavバーが重な」る原因は、ロゴ画像に position: absolute; を設定しているからです。とりあえず、下記のように削除すれば重ならなくなります。

css
1.h-title .h-logo{
2    width: 300px;
3/* 削除  ここから 
4   position: absolute;
5   top: 50%;
6   left: 4%;
7   transform: translateY(-50%)
8ここまで */
9}