unwanted margin-right space that cames from nowhere

Question

I'm getting a some weird margin-right space without define any margin-right.

I'm using css reset beforehand with *{margin:0;padding:0;} so there is no reason for that margin right between all ul sections.

The HTML :

<div class="footer-links">

        <ul>
            <li><h3>Title A</h3></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

        <ul>
            <li><h3>Title B</h3></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

        <ul>
            <li><h3>Title C</h3></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

        <ul>
            <li><h3>Title D</h3></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

    </div>

The CSS :

.footer-links {
    border: 1px solid #ddd;
    width: 992px;
    margin: 0 auto;
    padding: 20px 0;
    color: #222;
}
.footer-links a {    
    color: #565656;
}
.footer-links ul {
    border: 1px solid #ccc;
    display: inline-block;
    min-width: 250px;
    text-align: left;
}
.footer-links h3 {
    padding-bottom: 2px;
} 

.footer-links li {
    padding-bottom: 3px;
} 

The jsFiddle :

http://jsfiddle.net/VrMVU/1/

Answer 1

You have spaces between them. As in, the new lines.

Try doing </ul><ul>

Answer 2

Hope that this helps! js fiddle. What was wrong was the spaces.

       <ul>
        <li><h3>Title A</h3></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul><ul>
        <li><h3>Title B</h3></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul><ul>
    .....