Search code examples
htmlcssoutline

Why does my menu not go all the way to the left

I'm new to coding so sorry if what I'm doing here is completely stupid.

I'm building a very basic website using html and css. I want to use 2 navigation bars. One on the top of the screen for the main navigatio. And one on the left side for navigating through that specific page.The first one works fine but the second one looks weird. The clickable links can't be moved further to the left and are therefore sticking out on the right. This is what I mean:

enter image description here

I'm hovering with my mouse on "content2"

What am I doing wrong? Here is the code I wrote:

<body>
    <nav>
        <ul class="navbar">
            <li class="navbar"><a class="navbar active" href="index.html">home</a></li>
            <li class="navbar"><a class="navbar" href="page1.html">page 1</a></li>
            <li class="navbar"><a class="navbar" href="page2.html">page 2</a></li>
            <li class="navbar"><a class="navbar" href="page3.html">page 3</a></li>
            <li class="navbar"><a class="navbar" href="page4.html">page 4</a></li>
        </ul>
    </nav>

    <div id="contentbar">   
        <ul class="ucontentbar">
            <li class="contentbar"><a class="contentbar" href="#">content1</a></li>
            <li class="contentbar"><a class="contentbar" href="#">content2</a></li>
            <li class="contentbar"><a class="contentbar" href="#">content3</a></li>
            <li class="contentbar"><a class="contentbar" href="#">content4</a></li>
            <li class="contentbar"><a class="contentbar" href="#">content5</a></li>
            <li class="contentbar"><a class="contentbar" href="#">content6</a></li>
            <li class="contentbar"><a class="contentbar" href="#">content7</a></li>
        </ul>
    </div>

    <div id="page">
    <p>text</p>

    </div>

</body>

And the CSS that goes with it:

body {
margin: 0px;
padding: 0px;
}

nav {
background-color: rgb(50,50,50);
font-family: sans-serif;
font-size: 20px;
height: 60px;
width: 100%;

}

ul.navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
text-align: right;
position: fixed;
}

li.navbar{
float: left;
height: 60px;
}

a.navbar { 
display: inline-block;
padding: 19px 25px;
background-color: rgb(50,50,50);
text-align: center;
color: white;
text-decoration: none;
}

a.navbar:hover {
background-color: black;
}

a.active {
background-color: rgb(80,80,220);
}

#contentbar {
background-color: rgb(100,100,100);
font-family: sans-serif;
font-size: 14px;
width: 300px;
height: 100%;
display: block;
position: absolute;
}

ul.contentbar {
margin: 0;
padding: 0;
}

li.contentbar {
list-style: none;

}

a.contentbar { 
left: 0;
background-color: rgb(100,100,100);
color: white;
display: block;
width:300px;
height: 30px;
text-decoration: none;

}   

a.contentbar:hover {
background-color: black;
}

#page { 
background-color: rgb(0,200,100);
width: 100%;
height: 100%;
}
Solution

  • Seems you have a typo in the ul's classname <ul class="ucontentbar"> so the padding is not being applied.