cetaphil cetaphil - 4 months ago 8
HTML Question

Trouble with Navtab

I´m learning HTML and CSS from the freecodecamp. With all the Bootstrap code I'm a bit confused.

Here is my code:



h1 {
text-align: center;
letter-spacing: 5px;
color: coral;
font-family: verdana;
}
ul {
height: 20%;
background-color: darkgrey;
list-style-type: none;
display: solid;
}
li {
display: inline-block;
padding: 0% 5% 0% 5%;
text-align:
}
#first {
margin: 0% 0% 0% 30%;
}
li:hover {
background-color: bisque;
text-decoration: none;
}

<h1> Test Website </h1>
<div class="container-fluid">
<div class="menu">
<div id="tope"></div>
<ul id="navbar">
<li id="first"><a href="www.a.com"> Us </a></li>
<li><a href="www.b.com"> Work </a></li>
<li id="last"><a href="www.c.com"> Vids and photos </a></li>
</ul>
</div>
</div>





Demo: CodePen.

The problem that I am struggling on is that my navtab (actually, all the
<li>
elements) don't follow the main title
<h1>
element when I resize the screen.

I want to make some kind of grid system, where my
<li>
are centered in relation to the
<h1>
, but without Bootstrap. Is that possible? If so, how?

Answer

The reason your list is not aligning properly on resize is that you have added a margin-right value to #first. That shifts everything out of alignment. But you are very close to achieving your desired results!

You just need to make a few corrections:

http://www.bootply.com/YHHS5on2Ej

ul {                
    background-color: darkgrey;
    list-style-type: none;
    width: 100%;
    text-align: center;
}

li {   
    display: inline-block;
    padding: 0% 5% 0% 5%;
}

Get rid of all the CSS for #first and note that display:solid is not valid CSS

Comments