html - 我怎样才能让这个列表菜单与内容对齐？

Question

我已经尝试将边距设置为 0 以消除缩进，将文本对齐方式更改为左对齐，以及尝试使用 div 的填充，但我似乎无法使其与图像，无论我做什么。我究竟做错了什么？

这是我想要的样子:

这是它的样子:

这是 HTML:

<div id="container">
<div id="header">
<img src="images/gkmlogo.png" alt="God, Kill Me" />
</div>

<div id="nav">
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="archive.html">Archive</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <right><li><a href=""><img src="images/social_twitter.png" /></a>    </li>
        <li><a href=""><img src="images/social_rss.png" /></a></li>         
    </ul>
</div>

<div id="content">
<div id="content-comic">
                <div class="comic-nav">
            <ul>
                <li><a href="">First</a></li>
                <li><a href="">Previous</a></li>
                <li><a href="">Next</a></li>
                <li><a href="">Last</a></li>
            </ul>
        </div>

        <div id="comic">
            <img src="images/0000.png" />
        </div>

        <div class="comic-nav">
            <ul>
                <li><a href="">First</a></li>
                <li><a href="">Previous</a></li>
                <li><a href="">Next</a></li>
                <li><a href="">Last</a></li>
            </ul>
        </div>
    </div>
<div id="side"> 
                <h2>Favorite Webcomics</h2>
        <ul>
            <li><a href="" target="_blank">Webcomic 1</a></li>
            <li><a href="" target="_blank">Webcomic 2</a></li>
            <li><a href="" target="_blank">Webcomic 3</a></li>
            <li><a href="" target="_blank">Webcomic 4</a></li>
            <li><a href="" target="_blank">Webcomic 5</a></li>
        </ul>
</div>

还有 CSS:

body {
font-family: 'Open Sans', serif;
color: #fff;
background-color: #2c2c2c;
}

#container {
background-color: #555555;
width: 1000px;
padding: 20px;
margin: 20px auto;
border-radius: 5px;
position: absolute;
left:0;
right: 0;
overflow: hidden;
}

#header {
margin: 5px;
padding: 1px;
text-align: left;
}

#nav {
background-color: #444444;
border-radius: 5px;
margin: 5px;
padding: 1px;
text-align: left;
}

#nav li {
display: inline;
list-style-type: none;
}

.comic-nav {
margin-top: -5px;
padding-left: 0;
}

.comic-nav ul li {
    display: inline;
    list-style-type: none;
    margin: 5px;
    text-align: left;
}

.comic-nav a, #side ul a {
font-family: Verdana;
font-size: 10pt;
text-transform: none;
}

#content {
background-color: #444444;
border-radius: 5px;
margin: 5px;
padding: 10px;
text-align: left;
height: 1125px;
}

#content-comic{
float: left;
background-color: #444444;
width: 70%;
height: 1125px;
overflow: auto;
text-align: left;
padding-left: 12px;
}

#side {
float: right;
background-color: #444444;
width: 25%;
height: 1125px;
overflow: auto;
}

#side ul {
    list-style-type: none;
    padding-left:0;
    }
 h2 {
font-size: 16pt;
font-family: 'Cinzel', serif;
}

非常感谢。对于任何额外的信息，我深表歉意，只是想说得更透彻一些。

Answer 1

在此示例中，由于 UL 标签上的边距，列表项似乎被推送。

尝试将此边距设置为 0。

ul { magin-left: 0; padding-left: 0; }

#nav {
padding-left: 22px;
}