I am trying to center these <li> elements but I can't seem to figure out how. I now I could just add 400 margin to the other <li> element in CSS but I need to have a picture to the left of both of these and I know that won't work because the margin will make the pictures farther away then a I want. Here is my HTML code and my CSS code..

HTML Code:

<!DOCTYPE html>

<head>
    <style>font.tahoma{font-family:Tahoma, Geneva, sans-serif;}</style>
    <style>font.trebuchet{font-family:"Trebuchet MS", Helvetica, sans-serif;}</style>
    <title>Ceracy Games | About Us</title>
    <link rel="stylesheet" type="text/css" href="aboutstyle.css"/>
    <link rel="stylesheet" type="text/css" href="navigationbar.css" />
</head>

<body>
    <div id="navcontainer">
        <center><div id="navigationbar" style="width:1000px; margin: 0px 0px" align="left">
            <img src="http://i.imgur.com/5NtjVFc.png" style="width:996px; margin:0px 0px; position:absolute; border-left: solid black 2pt; border-right: solid black 2pt;"/>
            <ul style="margin:-8px 0px 0px 0px; height:50px; padding:0; width:996px; background:linear-gradient(#e41010, #ea7575); padding-top:12px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border: solid black 2pt;">
                <a href="www.ceracygames.com" style="text-decoration:none; color: white"><li class="navbar">Home</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">News</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">About Us</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">Forums</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">Contact Us</li></a>
            </ul>
        </div></center>
    </div>
    <div id="seperate1" style="height:20px; width: 100%;"></div>
    <div id="teampiccontainer" style="width:1000px; height:100px; background-color:#EB6262; margin: 0 auto; border-radius: 10px; border: solid black 2pt;">
        <div id="text1" style="display:table-cell; vertical-align: middle; width:1000px; height:100px; margin: 0 auto;">
            <center><font class="trebuchet">This area will contain the team picture, for now just ignore this text.  It will be replaced by a picture once a picture is acquired.<br>The image size will be width:1000px height:unknown.  So if you want to add a picture just E-Mail it to me.<br>E-Mail is benkuhman@gmail.com</font></center>
        </div>
    </div>
    <div id="seperate2" style="height:10px; width: 100%;"></div>
    <div id="aboutceracy" style="width:750px; height:200px; background-color:#646464; margin: 0 auto; border-radius: 10px; padding: 0 10px 0 10px; border: solid black 2pt;">
        <center><h1 style="padding-top:5px;"><font class="tahoma">About Ceracy Games</font></h1></center>
        <font class="trebuchet">We are a game creating team that tries to make the best games possible.  We hope that you enjoy the games that we make!  If you have any questions please use the "Contact Us" page!<br>
        <br>
        Thanks,<br>
        Ceracy Games</font>
    </div>
    <div id="seperate3" style="height:48px; width: 100%;"></div>
    <div id="row1aboutcontainer">
        <div id="row1person1" style="text-align: center;">
            <ul id="aboutlist">
                <li class="abouttext">Testing.</li>
                <li class="abouttext2">Testing.</li>
            </ul>
        </div>
    </div>
</body>

</html>

CSS Code:

html{

    background-image:url('http://i.imgur.com/GRqXyR1.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
    width:100%;
    height:100%;
}
li.abouttext{
    display:inline;
    margin: 0px 400px;
    text-align:center;
    border-radius: 10px; 
    padding: 50px 5px 50px 5px;
    background-color:#646464;
    border: solid black 2pt;
}
li.aboutpic{

}
li.abouttext2{
    display:inline;
    margin: 0px 0px;
    text-align:center;
    border-radius: 10px; 
    padding: 50px 5px 50px 5px;
    background-color:#646464;
    border: solid black 2pt;
}

CSS Code I made specifically for my navigation bar:

li.navbar{
    display:inline-block;
    margin: 0px 25px;
    border-width: 0px 2px 2px 2px;
    border-color: black;
    border-style: solid;
    padding: 11px 27px 11px 27px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    background:linear-gradient(#de4d4d, #de1818, #e91010);
    font-family:Arial, Helvetica, sans-serif;
}
li.navbar:hover{
    display:inline-block;
    margin: 0px 25px;
    border-width: 0px 2px 2px 2px;
    border-color: black;
    border-style: solid;
    padding: 11px 27px 11px 27px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    background:linear-gradient(#ff3333, #ff6666, #ff9999);
    color: white;
    font-family:Arial, Helvetica, sans-serif;
}

The tags <center> and <font> are absolete in HTML5 and XHTML.

<center> was replaced with text-align: center in css
<font> was replaced with font-family in css

You use mixed style, css and inline style. Inline style replace the attributes values set in css files.

Try this:

<div id="navcontainer">
    <div id="navigationbar" style="width:1000px; margin: 0px 0px; text-align: center;" >
    <img src="http://i.imgur.com/5NtjVFc.png" style="width:996px; margin:0px 0px; position:absolute; border-left: solid black 2pt; border-right: solid black 2pt;"/>
<ul style="margin:-8px 0px 0px 0px; height:50px; padding:0; width:996px; background:linear-gradient(#e41010, #ea7575); padding-top:12px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border: solid black 2pt;">
<a href="www.ceracygames.com" style="text-decoration:none; color: white"><li class="navbar">Home</li></a>
<a href="" style="text-decoration:none; color: white"><li class="navbar">News</li></a>
<a href="" style="text-decoration:none; color: white"><li class="navbar">About Us</li></a>
<a href="" style="text-decoration:none; color: white"><li class="navbar">Forums</li></a>
<a href="" style="text-decoration:none; color: white"><li class="navbar">Contact Us</li></a>
</ul>
</div>
</div>

Alright thank you for that but this doesn't help with centering the two things at the bottom that say "Testing."

Here is my updated HTML, this does effect my navigation bar but not my "Testing." boxes. If you run this HTML in Google, IE, Firefox, etc... you will see what I am talking about.

Updated HTML:

<!DOCTYPE html>

<head>
    <style>font.tahoma{font-family:Tahoma, Geneva, sans-serif;}</style>
    <style>font.trebuchet{font-family:"Trebuchet MS", Helvetica, sans-serif;}</style>
    <title>Ceracy Games | About Us</title>
    <link rel="stylesheet" type="text/css" href="aboutstyle.css"/>
    <link rel="stylesheet" type="text/css" href="navigationbar.css" />
</head>

<body>
    <div id="navcontainer" align="center">
        <div id="navigationbar" style="width:1000px; margin: 0px 0px;">
            <img src="http://i.imgur.com/5NtjVFc.png" style="display: block; margin-left:auto; margin-right:auto; width:996px; border-left: solid black 2pt; border-right: solid black 2pt; position: absolute;"/>
            <ul align="left" style="margin:-8px 0px 0px 0px; height:50px; padding:0; width:996px; background:linear-gradient(#e41010, #ea7575); padding-top:12px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border: solid black 2pt;">
                <a href="www.ceracygames.com" style="text-decoration:none; color: white"><li class="navbar">Home</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">News</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">About Us</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">Forums</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">Contact Us</li></a>
            </ul>
        </div>
    </div>
    <div id="seperate1" style="height:20px; width: 100%;"></div>
    <div id="teampiccontainer" style="width:1000px; height:100px; background-color:#EB6262; margin: 0 auto; border-radius: 10px; border: solid black 2pt;">
        <div id="text1" style="display:table-cell; vertical-align: middle; width:1000px; height:100px; margin: 0 auto;">
            <center><font class="trebuchet">This area will contain the team picture, for now just ignore this text.  It will be replaced by a picture once a picture is acquired.<br>The image size will be width:1000px height:unknown.  So if you want to add a picture just E-Mail it to me.<br>E-Mail is benkuhman@gmail.com</font></center>
        </div>
    </div>
    <div id="seperate2" style="height:10px; width: 100%;"></div>
    <div id="aboutceracy" style="width:750px; height:200px; background-color:#646464; margin: 0 auto; border-radius: 10px; padding: 0 10px 0 10px; border: solid black 2pt;">
        <center><h1 style="padding-top:5px;"><font class="tahoma">About Ceracy Games</font></h1></center>
        <font class="trebuchet">We are a game creating team that tries to make the best games possible.  We hope that you enjoy the games that we make!  If you have any questions please use the "Contact Us" page!<br>
        <br>
        Thanks,<br>
        Ceracy Games</font>
    </div>
    <div id="seperate3" style="height:48px; width: 100%;"></div>
    <div id="row1aboutcontainer">
        <div align="center" id="row1person1" style="text-align: center;">
            <ul id="aboutlist">
                <li class="abouttext">Testing.</li>
                <li class="abouttext2">Testing.</li>
            </ul>
        </div>
    </div>
</body>

</html>

This is it

<div id="row1aboutcontainer" >
    <div id="row1person1" style="text-align: center; position: relative; margin: 0px auto; ">
        <ul id="aboutlist">
        <li class="abouttext">Testing.</li>
        <li class="abouttext2">Testing.</li>
        </ul>
    </div>
</div>

yep. side note: putting the style attributes in CSS is preferable to using <style>

You can change you margin of li.abouttext2 to

margin: 0px 400px 0px 0px; 

and it should show the two button at the center of the page.

Try that and see if it works

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.