Forums

Give help. Get help.

  • # April 19, 2017 at 5:54 am

    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

    # April 19, 2017 at 7:10 am

    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag