I'm very confused and frustrated. Here's what my HTML and the result without any element such as H2, H1, or UL.

                <div id="about">
                    <p>2
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu metus, tempor eget aliquet vel, luctus ut ligula. Curabitur et augue nunc, id molestie magna. Vivamus eu dui vitae est scelerisque adipiscing. Sed ac felis sapien, in scelerisque ligula. Suspendisse potenti. Aliquam lobortis, turpis ut hendrerit dictum, eros turpis tristique sem, at semper erat nulla ac nulla. Aliquam erat volutpat. Quisque vestibulum, augue non ultrices condimentum, nulla dui aliquam nunc, at eleifend justo odio eu augue. Donec egestas ipsum quis est tempor blandit. Phasellus tincidunt sem vel ligula ullamcorper sed gravida neque pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus nunc arcu, commodo ut volutpat at, rutrum vitae felis.
                    </p>
                </div>

The result: http://i153.photobucket.com/albums/s228/siioking/1-7.png

However, if I simply add this in:

<ul>
<li>Frustrating list item</li>
</ul>

Bam, it's wrecked. http://i153.photobucket.com/albums/s228/siioking/2-1.png
Why does it completely split from all styling of the parent? I combed my CSS but failed to find the problem. I thought some nice person could take a quick look through and locate the problem.

/* -- Main ------------------
----------------------------- */
body {
    background: url(../images/home.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    margin: 0;
}
div[name=wrapper] {
    width: 940px;
    margin: 0 auto;   
}
h1[name=header] {
    margin: 7px 0px;
    padding: 0px 20px;
    color: #fff;
    width: 200px;
    text-align: center;
    font-family: "ff-nuvo-web-pro-1", "ff-nuvo-web-pro-2";
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 2em !important;
}
::selection {
    background-color: #d0d2c4;
}
::-webkit-selection {
    background-color: #d0d2c4;
}
::-moz-selection {
    background-color: #d0d2c4;
}
/* -- Content ---------------
----------------------------- */
#home p, #about p, #section p {
    margin-top: 45px;
    font-family: "ff-nuvo-web-pro-1", "ff-nuvo-web-pro-2";
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 7px 10px;
    width: 550px;
}
#home:first-letter, #about:first-letter, #services:first-letter {
    float: left;
    margin: 8px 15px 2px 0px;
    padding: 0px 12px 0px 0px;
    border-right: 1px solid #666;
    font-size: 32px;
}
#people {
    line-height: 2;
}
#people a:link, #people a:visited {
    font-family: Arial, sans-serif;
    border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
    padding: 5px 8px;
    background-color: rgba(211, 211, 211, 0.7);
    color: #fff;
    text-decoration: none;
}
#people a:hover {
    background-color: rgb(211, 211, 211);
    color: #000;
}
/* -- Arrows & such ---------
----------------------------- */
#arrow-left, #arrow-right {
    position: absolute;
    z-index: 20000;
    width: 84px;
    height: 84px;
}
#arrow-left:active, #arrow-right:active {margin-top: 1px;}
#arrow-left {background-image: url('../images/arrow_left.png')}
#arrow-left:hover {cursor: pointer; cursor: hand; background-image: url('../images/arrow_left_over.png')}
#arrow-right {background-image: url('../images/arrow_right.png')}
#arrow-right:hover {cursor: pointer; cursor: hand; background-image: url('../images/arrow_right_over.png')}