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

CSS

Posted by Mikey rizkalla
Mikey rizkalla
5,525 Points

Cannot center the .main-nav inside its container.

Here is part of the code (HTML and CSS) that i've been having trouble with. I am trying to center with .main-nav at the bottom center of the banner photo. I can't really attach the photo to this file but hopefully you guys can help without the photo.

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real Estate</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <div class="main-nav">
      <div class="logo">
        <h1 class="blue">Real</h1>
        <h1 class="white">Estate</h1>
      </div>
      <img src="img/backyard.jpg" class="banner-img" alt="backyard">
      <ul class="nav-list">
        <li><a href="#">Main</a></li>
        <li><a href="#">Buying</a></li>
        <li><a href="#">Selling</a></li>
        <li><a href="#">Renting</a></li>
        <li><a href="#">Finance</a></li>
        <li><a href="#">Contacts</a></li>
      </ul>
    </div>

* {
  box-sizing: border-box;
}

body {
  background: #2a2a2a;
  font-family: 'Rambla', sans-serif;
  padding: 0;
  margin: 0;
}

p {
  color: white;
}

h1 {
  font-weight: bold;
}

h2 {
  color: white;
}

.logo {
  display: inline-flex;
  margin-left: 10%;
  background: #0d0d0d;
  padding: .8em;
  position: absolute;
  z-index: 100;
}

.blue {
  color: rgb(58, 93, 239); 
}

.white {
  color: white;
}

.blue,
.white {
  margin: 0;
}

.banner-img {
  max-width: 100%;
  margin-top: 2.1em;
  box-shadow: 0 0 10px 2px;
}

.main-nav {
  list-style: none;
  text-align:;
  position: relative;
  margin: auto;
  display: inline-block;
}

.nav-list {
  list-style: none;
  display: inline-flex;
  padding: 0;
  position: absolute;
  bottom: 3px;
}

.nav-list a {
  font-weight: bold;
  text-decoration: none;
  color: white;
  background: rgba(0,0,0, .7);
  padding: 1em;
}

.nav-list a:hover {
  background: rgba(58, 93, 239, .7);
}

.btn {
  background: #006cff;
  color: white;
}

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Well, you have a bit of a tricky situation with an absolute positioned element (ul.nav-list) who's positioning context is a parent (div.main-nav) that is much smaller than itself.

Now if the the positioning context was the window (if the parent had no position property), you could horizontally center the UL using left: 50%; along with transform: translateX(-50%);.

Or, if the parent had the normal display mode for a div (block) instead of inline-block, it would span the width of the window and you could still center the absolute UL within it using the same properties as above.

But then with a normal div parent, if the UL was not positioned absolute you would have other centering options via margins, alignment, etc.

So, you have a few choices depending on how you want to handle it.