Centering Webpage

[thedesignerpaul]

I am having an incredibly hard time centering this webpage. I have tried everything. Too bad I cannot upload a screen shot.

HTML:

    <title>Pacific Trails Resort</title>





<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
    <a href="index.html">Home</a>  
    <a href="yurts.html">Yurts</a>  
    <a href="activities.html">Activities</a>  
    <a href="reservations.html">Reservations</a>
</nav> 

<div id="yurthero"></div>

CSS:

header, nav, main, footer {display: block;}
*   {   box-sizing: border-box; }


body {
    color: #666666;
    margin-right: auto;
    margin-left: auto; 
    font-family: Verdana, Arial, sans-serif;
    background-image: url(images/background.jpg);
    background-repeat: repeat-x;
}

h1 {
    line-height: 200%;
    color: #FFFFFF;
    font-family: Georgia;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    background-image: url(images/sunset.jpg);
    background-repeat: no-repeat;
    height: 70px;
    background-color: #000033;
    background-position: right top;
    margin-bottom: 0;
}

This is not ALL the code.

Thank you
Paul

[Paulie_D]

A minimal Codepen.io demo of the problem would be of more use here.

That said, you can’t really center the body…it’s automatically 100% wide.

You might want to limit the width of the #wrapper amd apply margin:auto…that should do it.

[Author]

Posts