Question

At some point my floating link list has ended up with an indent, causing the last link to go onto a new line (or over the side of the div if I set a width for the ul).

I literally don’t know where to start looking for this problem. I’m just going to go ahead and link to the website. Here’s the HTML for that section:

<div id="navigation">
<ul id="navLinks">
    <li><a href="home.html">Home</a></li>


    <li><a href="alston.html">Alston</a></li>


    <li><a href="booking.html">Booking</a></li>

    <li><a href="photos.html" class="lastLink">Photos</a></li>


</ul>
</div>

And here is what I believe is the only CSS affecting it:

#navigation {
   position: relative;
   //width: 210px;
   //height: 600px;
   margin: 2px 0;
   font-size: 90%;
   font-weight: normal;
   clear:both;
   overflow:hidden;
}

//NAVIGATION BAR STUFF
#navLinks {
   list-style-type:none;
   //display:inline;
   margin-left:auto;
   margin-right:auto;
   width: 100%;
   padding:0;
   text-align:center;
   text-decoration: none;
   overflow:hidden;
}

ul#booking {
color:rgb(84, 154, 14);
}

ul#navlinks {
   text-algin: center;
   margin: 0;
   padding: 0;
}

ul#navLinks li { display: inline;
list-style-type: none;
   line-height: 150%;
   margin-right: 10px;
   margin-left: 10px;
   background-color: #fff; }

ul#navLinks li a
{
float: left;
text-align:center;
background-color: #ADF16A;
color: #000000;
text-decoration: none;
border-left: 0px;
border-top: 0;
border-bottom: 0;
border-right: 1px;
border-style: solid;
border-color: #7AE015;
width:161px;
padding:3px 0px;
}

ul#navLinks a:hover
{
   background-color: #CC7A00;
}


ul#navLinks .lastLink{
    border:0;
}
//ul#navLinks a 
//END OF NAVIGATION BAR STUFF

The entire CSS is here

Thanks!

Answer 1

Your #navLinks has some left padding thrown in by browser default (in my cas, -webkit-padding-start: 40px;). If you define padding-left: 0;, that will be overridden.

You did cover this base in Line 195 of your style1.css, which has ul#navlinks { but that needs to be ul#navLinks {.

Make sure you’re spell-checking your text-aligns, and capitalizing classes and IDs in your CSS file when they’re capitalized in your CSS file.