How to center CSS pet lookup?

[zombier]

Hi. I have absolutely no idea if I put this in this category.
 
Here's the lookup in question.
http://www.neopets.com/petlookup.phtml?pet=miguashi
I'm using this pet to test it all out. 
I found this neat css by sparkle and it's driving me absolutely bonkers that it's on the top left and not in the center of the page or aligned to be center of the page (on everyones screen and browsing experience.)
Is there a anything I can do?

Here is the code! I.. I got no idea how to change it. Tried to neomail the owner but I'm like 90% sure that everyone who has done premades are gone forever.
 
Thanks for replies. :3

<style>
#header, #footer, .sidebar, #nst, .user, .brand-mamabar, #ban, .contentModuleHeader, .contentModuleHeaderAlt, #pet_rating, .contentModuleContent td img, #ad-table {
	display: none !important;
	border: none;
}
.content div div, .content .contentModule {
	display: block;
}
.content .contentModule, .contentModuleTable {
	border: none;
}
table, table td {
	border: 0px !important;
}
#main {
	margin-left: 320px;
	width: 66px;
	border: 0px solid #ffffff;
	margin-top: 0px;
	background: none;
}
#content {
	width: 660px;
	background: none;
}
body {
	background: #ffffff;
}
body, .medText, td, tr, font, p, div {
	color: #8a00ff;
	font: 8.5pt verdana;
	line-height: 12pt;
}
h1 {
	font: 36px georgia;
	margin: 0px;
	line-height: 40px;
	color: #00ff12;
	letter-spacing: 3px;
	font-weight: bold;
	text-align: left;
}
h2 {
	font: 8pt tahoma;
	margin-bottom: 5px;
	line-height: 20px;
	color: #ffffff;
	background-color: #ffa800;
	letter-spacing: 3px;
	font-weight: bold;
	text-align: right;
}
b {
	color: #f07be1;
	font-weight: normal;
}
i {
	border-bottom: 1px solid #ffa800;
}
a:link, a:active, a:visited {
	font-weight: bold;
	color: #ffa800;
}
a:hover {
	color: #00ff12;
}
.aja {
	width: 8px;
}
img.little {
	width: 50px;
	height: 50px;
	padding: 4px;
}
#CustomNeopetView {
	height: 310px;
	width: 310px;
	border: 5px solid #00ff12;
	background: #ffa800;
	padding: 5px;
}
</style><div style="position: fixed; top: 10px; left: 20px; width: 300px; text-align: justify;">


<h1>PET NAME</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget sem vitae risus lobortis eleifend eget id libero. Nullam pretium at ipsum et sagittis. Praesent a dapibus mi, eu pulvinar tellus. Sed volutpat eget lorem eu fringilla. Curabitur tellus leo, viverra quis facilisis et, sagittis nec tellus. In at nisl at velit pulvinar dapibus at sit amet sapien. Duis scelerisque commodo molestie. Nulla non auctor tortor. <br><br><h2>Second Header</h2>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
CSS by <a href="/~Sparkle">Sparkle</a>.</p>
</div>

This topic has been edited by a member of staff (Spritzie).
This topic was posted in the wrong area.
Please check your user inbox to see if you have been contacted regarding this topic.
Per the reason above, this topic has been MOVED from 'Neopets Help' to 'Computers & Programming'.
 
Are bumps allowed on this forum? -pokes it-
 
 
This post has been edited by a member of staff (Spritzie) because of a violation of the forum rules.
Please don't double post. If your post is the most recent reply and you would like to add something, use the 'Edit' button.
Please check your user inbox to see if you have been contacted regarding this incident, then review our rules.

[Mouseykins]

In your code you'll want to have something like this:

#main {
margin-left: auto;
margin-right: auto
}

Add this to  the rest of your #main codes above. I hope this helps. :)

[zombier]

In your code you'll want to have something like this:

#main {
margin-left: auto;
margin-right: auto
}

Add this to  the rest of your #main codes above. I hope this helps. :)

Okay! I did that and it.. moved.. some of it?

http://www.neopets.com/petlookup.phtml?pet=Miguashi

[Mouseykins]

Hmm well after some playing around with the layout, it appears that it's not designed to be centered. I've tried several things that I can think of and nothing's worked. The only thing I was able to do was center your pet and then center the text portion underneath it.

 

Sorry I can't be much more help. :(

[deboratibi]

<style>

#header, #footer, .sidebar, #nst, .user, .brand-mamabar, #ban, .contentModuleHeader, .contentModuleHeaderAlt, #pet_rating, .contentModuleContent td img, #ad-table {

display: none !important;

border: none;

}

.content div div, .content .contentModule {

display: block;

}

.content .contentModule, .contentModuleTable {

border: none;

}

table, table td {

border: 0px !important;

}

#main {

margin-left: 525px;

width: 66px;

border: 0px solid #ffffff;

margin-top: 0px;

background: none;

}

#content {

width: 660px;

background: none;

}

body {

background: #ffffff;

}

body, .medText, td, tr, font, p, div {

color: #8a00ff;

font: 8.5pt verdana;

line-height: 12pt;

}

h1 {

font: 36px georgia;

margin: 0px;

line-height: 40px;

color: #00ff12;

letter-spacing: 3px;

font-weight: bold;

text-align: left;

}

h2 {

font: 8pt tahoma;

margin-bottom: 5px;

line-height: 20px;

color: #ffffff;

background-color: #ffa800;

letter-spacing: 3px;

font-weight: bold;

text-align: right;

}

b {

color: #f07be1;

font-weight: normal;

}

i {

border-bottom: 1px solid #ffa800;

}

a:link, a:active, a:visited {

font-weight: bold;

color: #ffa800;

}

a:hover {

color: #00ff12;

}

.aja {

width: 8px;

}

img.little {

width: 50px;

height: 50px;

padding: 4px;

}

#CustomNeopetView {

height: 310px;

width: 310px;

border: 5px solid #00ff12;

background: #ffa800;

padding: 5px;

}

</style><div style="position: fixed; top: 10px; left: 180px; width: 300px; text-align: justify;">

 

 

<h1>PET NAME</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget sem vitae risus lobortis eleifend eget id libero. Nullam pretium at ipsum et sagittis. Praesent a dapibus mi, eu pulvinar tellus. Sed volutpat eget lorem eu fringilla. Curabitur tellus leo, viverra quis facilisis et, sagittis nec tellus. In at nisl at velit pulvinar dapibus at sit amet sapien. Duis scelerisque commodo molestie. Nulla non auctor tortor. <br><br><h2>Second Header</h2>

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>

CSS by <a href="/~Sparkle">Sparkle</a>.</p>

</div>

 

I believe this works... I changed the values in the bolded parts. If it's not perfect, play around with those numbers!