Menu
For some reason in my footer there's a space to the left of my ul so it isn't lined up with the content above it (membership text etc) If I were to put text outside this ul (but still within the footer wrapper) there is no such space.
Here's what it looks like: 
HTML:
<!DOCTYPE html> <html> <head> <title>Ozanam Club </title> <link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/normalize.css"/> <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/fonts/enigma.css" /> </head> <body> <div id="wrap"> <header> <div id="logo"><a href="#"><img src="images/logo.png" height="157px" width="237px"></a></div> <!-- <div class="social"> <ul> <li><a href="#"><img src="images/icons/facebook.gif"/></a></li> <li><a href="#"><img src="images/icons/twitter.gif"/></a></li> <li><a href="#"><img src="images/icons/youtube.gif"/></a></li> </ul> </div> --> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Events</a></li> <li><a href="#">Clubs</a></li> <li><a href="#">Photos</a></li> <li><a href="#">F.A.Q</a></li> <li><a href="#">Contact</a></li> </ul> </div> </header> <section class="slider"> <div class="flexslider"> <ul class="slides"> <li> <img src="images/slider/image1.gif" /> </li> <li> <img src="images/slider/image2.gif" /> </li> <li> <img src="images/slider/image3.gif" /> </li> </ul> </div> </section> <div class="main"> <h1>Ozanam Club</h1> <p>The first Ozanam Club was started in May 1989 by James Lynch, a member of the St. Vincent De Paul society who himself had two children with learning difficulties and who was concerned at the general lack of leisure provision for them.</p> <p>The Ozanam Club is a Special Works Conference of the St. vincent De Paul Society. The name of the clubs are called after Blessed Frederick Ozanam who is the founder of the S.S.V.P. At this present time we have two clubs in Viewpark, an adults club and a seperate club for younger members. We have an adults club in Hamilton and Paisley and also a club in Carfin for younger members. </p> <h1>Membership</h1> <p>Membership is open to anyone who has disablities, regardless of their race or religious belief.</p> <p>The aim of the clubs are a fun night out for our members and some temporary respite for parents. All of the clubs are run solely by volunteers who are disclosure checked prior to working with vulnerable adults/children.</p><p> They are also made aware of the Adults/Children Protection Procedures and encouraged to attend an information session.</p> <p>You can find more information on our a <a href="#">F.A.Q page.</a></p> </div> <div class="side"> <img src="images/events.gif" alt="Events" /> <a href="#" class="button">View</a> </div> <div class="side"> <img src="images/photos.gif" alt="Events" /> <a href="#" class="button">View</a> </div> </div> <footer> <div id="footer-wrap"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Events</a></li> <li><a href="#">Clubs</a></li> <li><a href="#">Photos</a></li> <li><a href="#">F.A.Q</a></li> <li><a href="#">Contact</a></li> </ul> </div> </footer> </div> </div> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script defer src="js/jquery.flexslider-min.js"></script> <script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> </body> </html> CSS:
body {background: white; background: url('../images/grunge.png'); font-family: 'EnigmaticRegular';} #wrap {margin: 0 auto; width: 100%; max-width: 1000px;} header {position: relative;} #logo {margin: 20px 0 0 0; display: block; float: left;} .social ul { z-index: 1; list-style: none; position: absolute; top: 0; right: 0;} .social li { float: left;} .social img { height: 35px; width: 35px;} #navigation { width: 100%; max-width: 1000px; height: 200px; position: relative; } #navigation ul { padding: 0.5em; background: white; border-radius: 5px; border-bottom: solid 3px #3c88bc; display: inline-block; position: absolute; bottom: 0; right: 0;} #navigation li { padding-left: 0.5em; padding-right: 0.5em; list-style: none; font-style: none; font-family: 'EnigmaticBold'; border-right: solid 1px black;} #navigation li:last-child { border: 0;} #navigation ul, #navigation li {float: left;} #navigation a { color: #195c8a; text-decoration: none; font-weight: bold;} #navigation a:hover { color: #13405f;} .main { float: left; margin-top: 20px; width: 625px;} .main h1 {font-family: 'EnigmaticBold'; color: #13405f; } .main p {color: #13405f;} .main a {color: inherit; } .side {float: right; margin-top: 20px; border-radius: 10px; margin-bottom: 10%; } .side a { text-decoration: none; color: #3c88bc;} .button { font-size: 14px;font-family: 'EnigmaticBold'; display: block; width: 100px; margin: 0 auto; text-align: center; background: #fff; padding: 5px; border-radius: 10px; border-bottom: solid 3px #3c88bc;} footer { height: 100px; background: #195c8a; clear: both; } #footer-wrap {margin: 0 auto; padding: 0; width: 100%; max-width: 1000px; } #footer-wrap li { float: left; list-style: none; padding-right: 3em;} #footer-wrap a {color: white ;text-decoration: none;} 
571
This means the bullet points will by default sit outside (to the left) of the element. You can force the alignment to happen to the bullet point, not the text like so: ul { list-style-position: inside; } Alternatively you can just add your own margin to push the entire list element like so: ul { margin-left: 20px; }
All replies. Hi, Simply set padding:0px to ul will remove the indent.
You can add padding: 0 to the ul element to force it to stick to the left border of the parent nav element.
Defines the space outside the element, on the left side. default margin-left: 0; Removes any margin on the left.
The <ul> element has browser inherent padding & margin by default. In your case, Use
#footer ul { margin: 0; /* To remove default bottom margin */ padding: 0; /* To remove default left padding */ } or a CSS browser reset ( https://cssreset.com/ ) to deal with this.
149
I don't see any margin or margin-left declarations for #footer-wrap li.
This ought to do the trick:
#footer-wrap ul, #footer-wrap li { margin-left: 0; list-style-type: none; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
