Finding out where an extra space is coming from?

Question

I am working on the footer on this particular project. Right now I have it set up as 2 unordered lists, however the 1 on the left has an extra space to the left of the first line (FEATURES). I can not seem to figure out where it is coming from specifically and was wondering if someone can point me in the right direction or recommend a fix.

I want to avoid using any hard coded negative margins please.

HTML:

<div class="container">
                        <div class="footer">
                            <div class="row menu">
                                <div class="col-md-6">
                                    <ul class="left-side footer-menu">
                                        <li class="right-spacer">FEATURES</li>
                                        <li class="right-spacer">BLOG</li>
                                        <li class="right-spacer">ABOUT</li>
                                        <li class="right-spacer">CONTACT</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <ul class="right-side footer-menu">
                                        <li class="left-spacer">PRIVACY</li>
                                        <li class="left-spacer">TERMS</li>
                                        <li class="left-spacer">VIDEO</li>
                                        <li class="left-spacer">SLIDE SHARE</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

CSS:

 .footer {
    width: 100%;
    border-top: 4px solid #d3d3d3;
}
.footer .menu {
    font-size: 15px;
}
.footer .footer-menu li {
    list-style-type: none;
    display: inline;
}
.footer .left-side li {
    float: left;
}
.footer .right-side li {
    float: right;
}
.left-spacer {
    padding-left: 58px;
}
.right-spacer {
    padding-right: 58px;
}

http://jsfiddle.net/rD6aQ/

score 1 · Accepted Answer · answered Jun 20 '14 at 03:42

1

You forgot to clear out the padding-left from ul. It is equal to 40px. Add this to your css:

.footer .menu ul {
    padding-left: 0px;
}

I guess such issues are why reset.css is used in many projects. Your updated jsfiddle is here.

answered Jun 20 '14 at 03:42

dmitry_romanov

5,146
1
33
36

score 0 · Answer 2 · answered Jun 20 '14 at 03:42

0

Update

<ul class="left-side footer-menu" >

to

<ul class="left-side footer-menu" style="padding:0px">

ul uses default indent which you should remove

answered Jun 20 '14 at 03:42

coder hacker

4,819
1
25
50

score 0 · Answer 3 · answered Jun 20 '14 at 03:46

0

<ul> has default padding of 40px (webkit), it may slightly change for other browsers.

Just add padding: 0; to ul

Demo

answered Jun 20 '14 at 03:46

4dgaurav

11,360
4
32
59

score 0 · Answer 4 · edited May 23 '17 at 12:13

I've noted multiple issues here. First of all, you're using Bootstrap classes, like .col-md-6 and .row, but did not include bootstrap itself. If you're actually using Bootstrap and didn't include it in fiddle, that's one thing.

If you do not plan to use Bootstrap, you need to handle the problem that comes from using float: floated elements are taken out of flow, therefore parent elements have zero height. Consider using clearfix, or changing to display for li inline-block.

What is a clearfix?

Another problem you should take into account is that browsers have their default paddings/margins for lists. So, unless you specify your own paddings and margins, your ULs will end up using default ones, like

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

Keep that in mind, and you'll be safe)

Finding out where an extra space is coming from?

4 Answers4