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
Arshdeep Singh
Courses Plus Student 8,349 PointsCenter Navigation.
Hello Can anyone help me please center this navigation.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Mobi.com</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<a href="#" class="logo">Logo</a>
<div class="social">
<ul>
<li><a href="#"><img src="images/fb-icon.png" alt="facebook" titile="facebook"></a></li>
<li><a href="#"><img src="images/ig-icon.png" alt="twitter" title="twitter"></a></li>
<li><a href="#"><img src="images/tw-icon.png" alt="instagram" title="instagram"></a></li>
</ul>
</div>
</header>
<div class="navigation">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<div class="display"></div>
<div class="content"></div>
<div class="boxes">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
<footer>
</footer>
</div>
</body>
</html>
body {
font: 100%;
}
.container {
margin: 0 auto;
width: 62.5em;
height: 100%;
}
header {
background-color: #604848;
position: relative;
width: 100%;
height: 10.625em;
margin: auto;
border: solid #f0f0d8;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.logo {
color: #f0f0d8;
position: absolute;
font: bold 4.5em sans-serif;
text-decoration: none;
left: 5%;
top:20%;
}
.social ul{
margin: 0;
padding: 0;
position: absolute;
right: 5%;
top: 40%;
}
.social li{
float: left;
list-style: none;
}
.social img {
margin-left: 0.625em;
width: 42px;
height: 42px;
}
.social img:hover {
border-radius: 10px;
background-color: #604848;
-webkit-box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.20);
-moz-box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 11px 4px rgba(250, 250, 250, 0.20);
}
.navigation nav {
width: 100%;
margin: 0;
}
.navigation ul {
background-color: pink;
width: 100%;
height: 51px;
margin-left: 0;
}
.navigation li {
float: left;
list-style: none;
background-color: #f0f0d8;
width: 25%;
}
.navigation a {
clear: both;
display: block;
color: #604848;
height: 2.1255em;
text-decoration: none;
font: bold 1.5em sans-serif;
line-height: 2.1255em;
text-align: center;
}
.navigation li:hover {
background-color: #799048;
}
.navigation a:hover {
color: #fff;
}
.display {
margin-top: 1em;
width: 100%;
height: 20.625em;
border: solid #604848;
border-radius: 0 0 0.9em 0.9em;
-webkit-box-shadow: 0px 2px 7px -3px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 2px 7px -3px rgba(0, 0, 0, 1);
box-shadow: inset 0px 2px 7px -3px rgba(0, 0, 0, 1);
background-image: url("../images/ds.jpg");
background-repeat: no-repeat;
background-position: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
5 Answers
Wayne Priestley
19,579 PointsHi,
.navigation nav {
width: 96%;
margin: 0;
}
Wayne Priestley
19,579 PointsId like to say it was really complicated but in truth, i tried 90% then 95% then 96% and it looked right :)
Arshdeep Singh
Courses Plus Student 8,349 PointsThanks, how would you recommend making such navigation?
Arshdeep Singh
Courses Plus Student 8,349 PointsI tried it but it still leaves space on left hand side.
Arshdeep Singh
Courses Plus Student 8,349 PointsI tried it but it still leaves space on left hand side.
Arshdeep Singh
Courses Plus Student 8,349 PointsI tried it but it still leaves space on left hand side.
Arshdeep Singh
Courses Plus Student 8,349 PointsI tried it but it still leaves space on left hand side.
Arshdeep Singh
Courses Plus Student 8,349 PointsI tried it but it still leaves space on left hand side.
Arshdeep Singh
Courses Plus Student 8,349 PointsI tried it but it still leaves space on left hand side.
Wayne Priestley
19,579 PointsCan you explain exactly what you mean Arshdeep.
Arshdeep Singh
Courses Plus Student 8,349 PointsI mean, navigation which span entire width of the container.
Wayne Priestley
19,579 PointsI'll have to get back to you on that tomorrow Arshdeep, its 01:30 in the morning here, time for some sleep.
Arshdeep Singh
Courses Plus Student 8,349 PointsAppreciate it. Goodnight Mate.
Daniel Lute
3,043 PointsNot sure if this is what you are looking for, but I had similar problem and stumbled into this site and has helped me.
Arshdeep Singh
Courses Plus Student 8,349 PointsThanks Daniel. Great Help
Arshdeep Singh
Courses Plus Student 8,349 PointsArshdeep Singh
Courses Plus Student 8,349 PointsThanks, how did you calculate that. Please let me know.