css - style - UL tiene margen a la izquierda
ul html (3)
Esta pregunta ya tiene una respuesta aquí:
Por alguna razón, en mi pie de página hay un espacio a la izquierda de mi ul, por lo que no está alineado con el contenido de arriba (texto de membresía, etc.) Si tuviera que colocar texto fuera de esta ul (pero aún dentro de la envoltura del pie de página) No hay tal espacio.
Esto es lo que parece:
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;}
El elemento <ul> tiene un margen y relleno inherentes del navegador de forma predeterminada. En su caso, use
#footer ul {
margin: 0; /* To remove default bottom margin */
padding: 0; /* To remove default left padding */
}
o un reinicio del navegador CSS ( https://cssreset.com/ ) para lidiar con esto.
No veo ninguna declaración de margin o margin-left para #footer-wrap li .
Esto debería hacer el truco:
#footer-wrap ul,
#footer-wrap li {
margin-left: 0;
list-style-type: none;
}
por defecto <UL/> contiene relleno por defecto
por lo tanto, intente agregar estilo al padding:0px en css class o inline css