图标不会在导航菜单栏中格式化

Question

我遇到一个问题，Facebook 图标和 Instagram 图标没有在导航菜单栏中格式化，它就在它下面，不会进入栏内。我需要图标位于导航栏的右侧，header 和图标之间有一些 space，但它们在中间排成一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lunation Boards</title>
    <link rel = "icon" href="LogoBlack.PNG" type="image/SVG">
</head>
<style>
    body {margin:0;}
    .Header {
        z-index: 100;
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #000000;
        height: 70px;
    }

    @media screen and (max-width:680px) {
        .Header.responsive {position: relative;}
        .Header.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
    @media (max-width: 960px){
    .Header {
        position: relative;
        display: flex;
        width: 86px;
        height: 15px;
        margin: 0 auto;
    }
    }
    .headerLogo{
        text-align: center;
        font-size: small;
        font-style: italic;
        font-family: Verdana;
        color: white;
    }

</style>
<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <a href="file:///C:/Noah's%20stuff/LunationBoards/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center;">Lunation Boards</h1></a>
        <style>
            a{text-decoration: none}
        </style>
    </a>
    <a class = "Facebook" style = "padding-left: 1000px;">
        <img src = "facebook-3-xxl.png">
    </a>
    <a class = "Instagram" style = "padding-left: 30px">
        <img src = "instagram-32.png">
    </a>
</div>
</body>
<body>

Answer 1

您的样式必须在 <head> 部分。

Answer 2

我的意思是将样式放在头部部分之间，就像这样

<head>
    <meta charset="UTF-8">
    <title>Lunation Boards</title>
    <link rel = "icon" href="LogoBlack.PNG" type="image/SVG">
<style>
    body {margin:0;}
    .Header {
        z-index: 100;
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #000000;
        height: 70px;
    }

    @media screen and (max-width:680px) {
        .Header.responsive {position: relative;}
        .Header.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
    @media (max-width: 960px){
    .Header {
        position: relative;
        display: flex;
        width: 86px;
        height: 15px;
        margin: 0 auto;
    }
    }
    .headerLogo{
        text-align: center;
        font-size: small;
        font-style: italic;
        font-family: Verdana;
        color: white;
    }

</style>
</head>
<body>

图标不会在导航菜单栏中格式化

Icons will not format in the navigation menu bar

html

css

formatting

icons

navigationbar