HTML/CSS Navigation Bar Coloring

Question

I am trying to create a Portfolio, I am new to HTML and CSS. I am trying to get the top navigation bar, to be all black. But around the navigation bar, it shows the html's tag background color.

Image: As you can see, well it's a little hard to see here, but around the navigation bar, it shows the background color, how do I turn it black? (Click on the image to see it better)

Code:

<!DOCTYPE html>
<html style="background-color: #111;">
    <head>
        <title>My Portfolio</title>
        <style type="text/css">
            h6 {
                font-weight: light;
            }

            ul {
              list-style-type: none;
              margin: 0;
              padding: 0;
              overflow: hidden;
              background-color: black;
              position: sticky;
            }

            ul li img {
                width: 2vw;
                height: 2vw;
            }

            li {
              float: left;
            }

            li a {
              display: block;
              color: grey;
              text-align: center;
              padding: .4vw .5vw;
              text-decoration: none;
            }

            li a:hover {
              background-color: #111;
            }

            #navigation-bar {
                background-color: black;
                color: grey;
                font-weight: bold;
                font-family: monospace;
                font-size: 1.2vw;
            }

            #main-page {
                background-color: #111;
                color: white;
            }

            .header {
                background-color: #111;
                color: white;
                text-align: center;
                font-weight: bold;
                font-family: cursive;
                font-size: 2.5vw;
            }

            .sub-header {
                background-color: #111;
                color: white;
                text-align: center;
                font-weight: normal;
                font-family: cursive;
                font-size: 1.7vw;
            }

            .sub-header th{
                padding-left: 1vw;
                padding-right: 1vw;
            }

            .sub-header-two {
                background-color: #111;
                color: white;
                text-align: center;
                font-weight: normal;
                font-family: cursive;
                font-size: 1.1vw;
            }

            #copyright {
                background-color: #111;
                color: white;
                text-align: left;
                position: absolute;
                bottom: .5vw;
                font-weight: light;
                font-family: sans;
                font-size: .7vw;
            }
        </style>
    </head>
    <body>
        <div id="navigation-bar">
            <ul>
                <li><img src="https://cdn.discordapp.com/avatars/471009727602491405/1205d2f887ec380308940bb54b593d60.webp?size=128" height="50px" width="50px"></li>
                <li><a href="/home" title="Home">Home</a></li>
                <li><a href="/about" title="About Me">About Me</a></li>
                <li><a href="/languages" title="Languages">Languages</a></li>
                <li><a href="/work" title="Previous Work">Previous Work</a></li>
                <li style="float: right;"><a href="https://puginarug.com" title="An Amazing Website">An Amazing Website</a> </li>
            </ul>
        </div>
        <div id="main-page">
            <h1 class="header">Welcome to my Portfolio</h1>
            <table align="center" >
                <tr class="sub-header">
                    <th>What can I do here?</th>
                    <th>How can I get in contact?</th>
                    <th>Where can I support?</th>
                </tr>
                <tr class="sub-header-two">
                    <td><br><br>Here you can look around, or learn<br>about me! You can find info like<br>what languages I know, my previous<br>work, etc.</td>
                    <td>You can get in contact with me on<br>discord @ killrebeest#4357</td>
                    <td>Just Support by supporting me, like<br>a supporter</td>
                </tr>
            </table>
        </div>
        <div id="copyright">
            (C)Copyright 2022 All Rights Reserved
        </div>
    </body>
</html>

score 2 · Accepted Answer · answered Sep 19 '21 at 05:59

2

Add this styling

body, li {
  margin: 0;
}

Explanation: It has a margin on body on top. Because of this, your nav bar is a little bit near to bottom. When you do this, you remove a default margin from top.

Also I added li because, It has also default margin on it.

answered Sep 19 '21 at 05:59

Muhammedogz

774
8
21

1

Thanks! This worked perfectly! I'd also like to thank you for the explanation as I am still a little new to this language and styling, as I recently got into Web Development, and I'd like to learn in stead of having people directly telling me the answer without explanation. Thanks again! – killrebeest Sep 19 '21 at 06:04
1

Yep, I am going to do that as soon as it lets me, I guess you can't accept an answer till a time amount after the post has been created. – killrebeest Sep 19 '21 at 06:05
Yep I guess you are right. May the clean code be with you in your web journey :D – Muhammedogz Sep 19 '21 at 06:07

HTML/CSS Navigation Bar Coloring

1 Answers1