ヘッダー上の余白の消し方について

現在独学でHTMLを勉強しており、サイト制作を行っています。
現在ヘッダーから作成を行っているのですが、プレビューを見るとヘッダーが一番上の位置より少し下にずれているのです。
Google Chromeの検証ツールで確認したところ、上に余白があるような、表示が確認できました。

以前サイト制作をした時にこのような形にはならなかったのですが、ヘッダーを正常に一番上に表示する為の解決策をご教示いただけたらと思います。

また、リストの位置をCSSで移動する際に、同じヘッダー内の画像まで同じ位置に移動する為、そちらの解決策も教えて頂けたらと思います。
(CSSでクラス"footlist"を移動した際に画像の"unk.png"が一緒に移動してしまう。)

なお、今までメモ帳で作業をしていましたが、今回からVisual Studio Codeを用いてコーディングを行っています。

以下コード

HTML5
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <link href="UNK.css" media="all" rel="stylesheet">
6        </head>
7<body>
8<header>
9<div class="unkikon">
10    <img src="unk.png" alt="">
11</div>
12
13<div class="footlist">
14<nav>
15   <ul>
16    <li>UNKとは</li>
17    <li>会社情報</li>
18    <li>事業案内</li>
19    <li>採用情報</li>
20    <li>お問い合わせ</li>
21    </ul>
22</nav>
23</div>
24    
25</header>
26
27 <footer> </footer>
28
29
30</body>
31
32</html>

CSS3
1
2header{
3    height: 65px;
4    width: 100%;
5}
6
7.unkikon{
8float: left;
9}
10
11.unkikon img{
12width: 65px;
13margin-top: 0px;
14margin-left: 50px;
15}
16
17.footlist{
18margin-left: 600px ;
19margin-top: 50px;
20}
21
22.footlist li{
23    list-style-type: none;
24    float:left;
25    width: 120px;
26}
27
28.footlist::after {
29	content: "";
30	display: block;
31	clear: both;
32}
33main{
34    clear: both;
35    background-image: url(unk1.jpg);
36}

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

回答1件

ベストアンサー

最終的にどのようなレイアウトにしたいのか不明なので的確な回答は難しいですが、
とりあえず、横並びを float を使ってするのはやめましょう。
floatを使うと付近の要素のレイアウトに影響を及ぼし、レイアウトが崩れがちになります。

今ならFlexBoxを使って横並びさせるのがお勧めです。

FlexBoxを使った場合のサンプルコード

css
1header{
2  width: 100%;
3  display: flex;
4  justify-content: space-between;
5  align-items: center;
6}
7.unkikon img{
8  width: 65px;
9  height: 65px;
10  margin-left: 50px;
11}
12.footlist ul {
13  display: flex;
14  flex-wrap: wrap;
15}
16.footlist  li{
17  list-style-type: none;
18  width: 120px;
19  text-align: center;
20}