CSS - Page not centering

Question

Im pulling my hair out trying to center this page. The book for my class has a line-by-line example on how to do it, and everywhere I google gives me the same answer, but I cant get the page to center and im not sure why it will not center. He wanted us to make a style rule for the body element, so unless im using the wrong element, then im not sure what im doing wrong.

Heres what my output is: http://prntscr.com/id9kp0

The page content is supposed to be centered.

CSS:

Filename: pc_specials.css

*/

/* Page Body Styles */
body {
    margin-left: auto;
    margin-right: auto;
    max-width: 950px;
    min-width: 640px;
    width: 95%;
}

body > header > img {
    display: block;
    width: 100%;
}




/* Image Styles */
img {
    display: block;
    width: 100%;
}

/* Horizontal Navigation Styles */
.horizontal li{
    display: block;
    float: left;
    width: 16.66%;
}

a:link {
    display: block;
}


/* Row Styles */
.newRow {
    width: 100%;
}
newRow::after {
    clear: both;
    content: "";
}

div[class*='col-'] {
    float: left;
    padding: 2%;
    box-sizing: border-box;
}

div[class*='col-1-1'] {
    width: 100%;
}

div[class*='col-1-2'] {
    width: 100%;
}


/* Column Styles */




/* Specials Styles */



/* Award Styles */



/* Footer Styles */

HTML: https://pastebin.com/Ts71GM97

Any help will be appreciated, ive been stuck on this for a few hours and ive tried everything I can think of.

Please post your HTML as well, **in the question itself** as mentioned in [mcve]. Also, [questions like this](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div?rq=1) have been [asked and answered](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) [many times on SO](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers?rq=1). Please explain how your question is different, and why the answers in those questions did not work for you. — Heretic Monkey, Feb 11 '18 at 18:11
I cant find someone having the same problem as me exactly, as I said I googled and could not find a direct answer as to why. Also, I already saw and did what was in that question, and it didnt work. Your example is someone asking how, and I already know how. Its just not working... — Panda King Beersy, Feb 11 '18 at 18:15
How so? in a new element: body{margin:0 auto;} or changing the current margin in my code to that? — Panda King Beersy, Feb 11 '18 at 18:18
That didnt seem to change anything. I tried adding *{margin:0 auto;} and it didnt seem to change anything. I tried the body { margin: auto; width: 50%; } too and it didnt change anything :( — Panda King Beersy, Feb 11 '18 at 18:24
i think it's a problem with the order of your css files. if `reset2.css` resets browser defaults, then try to put the link tag of `pc_specials.css` behind the `pc_reset2.css`. keep in mind that styles overwrite previous declarations of the same selector. — Erik, Feb 11 '18 at 19:43

score -1 · Answer 1 · answered Feb 11 '18 at 18:26

-1

You can try the below one

body{ margin: auto; width: 50%; }

answered Feb 11 '18 at 18:26

Rakesh Androtula

403
4
11

I have the images for the HTML, but my output isnt the same on the web-page as yours. I really have no clue at this point why it is not centering. Ive tried deleting and re-downloading the source files he gives us, but it made no difference. If it helps I can give you the exact wording of what hes asking of me to do. – Panda King Beersy Feb 11 '18 at 18:31

CSS - Page not centering

1 Answers1