- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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.