Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
abdelhakim qabli
1,282 Pointsbox won't centralize
<header id="top">
<div class="header-text">
<span>journey through the sierra nevada mountains</span>
<h1>lake tahoe, california</h1>
<img src="/img/arrow.svg" type="img/svg" class="arrow">
</div> </header>
HI everybody as you can see above the content of the header won't centralize i tried but i can't seem to be able to find the solution i posted both the html and the css code thanks
<!DOCTYPE html> <html>
<head>
<title>Lake Tahoe</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header id="top">
<div class="header-text"> <span>journey through the sierra nevada mountains</span> <h1>lake tahoe, california</h1>
<img src="/img/arrow.svg" type="img/svg" class="arrow">
</div> </header> <div class="main"> <div class="discription"> <p>Lake Tahoe is one of the most breathtaking attractions locatedin California. It's home to a number of ski resorts, summer outdoor recreation , and tourist attractions. Snow and skiing are a significant part of the area's reputation.</p> <a href="#">Find out More</a> </div>
<div class="wildlife">
<h2>Check out all the wildlife</h2>
<p>As spawing season approaches, the fish acquire a humpback and protuberant jaw. After sparing, they die and their carcasses provide a feast for gatherings of <a href="#">mink</a>, <a href="#">bears</a> and <a href="#">bald eagles</a></p>
</div>
<a href="#">See the Wildlife</a>
<div class="content group">
<div class="resorts">
<img src="/img/resort.jpg">
<h3>From Tents to Resorts</h3>
<p>Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at five star resort. Here are our top three resorts:</p>
<ul>
<li><a href="#">Lake Tahoe Resort Hotel</a></li>
<li><a href="#">South Lake Tahoe Resorts</a></li>
<li><a href="#">Tahoe Ski Resort Lodging</a></li>
</ul>
</div>
<div class="tips">
<img src="/img/mtn-landscape.jpg">
<h3>Pack Accordingly</h3>
<p>One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are few tips:</p>
<ol>
<li>Bring layers of clothings</li>
<li>Pack sunscreen</li>
<li>Carry extra water just in case</li>
<li>Pack light</li>
</ol>
</div>
</div>
</div>
</body>
<footer>
<div class="footer">All rights reserved to the state of California</div>
<a href="#top">Back to top</a>
</footer>
</html>
========================================================================
body{
margin: 0;
font-family: "Helvetica Neue" ;
color: rgb(167, 167, 167);
}
header{
background-color: #ff7424;
color: white;
margin: 0;
margin-bottom: 60px;
text-transform: capitalize;
text-align: center;
height: 840px;
background-image: url('../img/mountains.jpg');
background-size: cover;
background-position: center ;
}
h1{
font-size: 5rem;
letter-spacing: 0.6rem;
text-transform: uppercase;
line-height: 1.3;
font-weight: normal;
}
header span{
font-size: 2rem;
}
a{
color: orange;
text-decoration: none;
text-align: center;
} h2{
font-size: 3rem;
padding-left: 20%;
padding-right: 20%;
}
h3{
text-transform: uppercase;
color: black;
font-size: 1.7em;
}
p{
font-size: 1.5rem;
}
footer{
text-align: center;
margin-top: 8%;
margin-bottom: 4%;
}
.arrow{
width: 50px;
}
.main{
width: 70%;
text-align: center;
margin: auto;
}
.discription{
text-align: center;
border-top: rgb(199, 192, 192) solid 0.1rem;
}
.discription p{
font-weight: bold;
}
.wildlife{
text-align: center;
border: solid orange 0.5rem;
padding: 15%;
background-color: rgb(99, 93, 93);
color: white;
margin: 20px 0px 20px;
background-image: url(../img/bear.jpg);
background-position: center;
background-size: cover;
}
.wildlife p{
font-size: 1.2em;
}
.content{
text-align: left;
padding-left: 5px;
border-top: rgb(199, 192, 192) solid 0.1rem;
border-bottom: rgb(199, 192, 192) dotted 0.1rem;
margin-top: 20px;
padding-bottom: 30px;
}
.content p{
font-size: 20px;
}
.footer{ margin-bottom: 10px; }
a:hover{
border-bottom: solid orange 1px;
}
.resorts{
float: left;
width: 45%;
}
.tips{
float: right;
width: 45%;
}
.group:after{
content: "";
display: table;
clear: both;
}
.tips img{
width: 90%;
height: 90%;
margin-top: 3rem;
}
.resorts img{
width: 90%;
height: 90%;
margin-top: 3rem;
}
.header-text{
position: center;
}
1 Answer
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi there, abdelhakim qabli
It's a bit hard to understand without delving into the site and code, which element you need to position, exactly. So let me try and give you a general tip that might help you.
In order to centralise the content of an element, you use the text-align: property on that element with the value of center.
But to centralise the element itself you need to do a few things.
First, find the container element, and give it a position: relative; property.
Then, find the containing elements and apply these styles.
margin: 0 auto;
display: block
This is what makes the browser calculate the margins needed to push the element to the center of the screen from the left and the right, forcing it to the center
You can also look into alignment tools provided by Flexbox and Grid later on but these are more advanced CSS techniques and not used in the Lake Tahoe example. :-)