How to set max-width for DIV contents but not the DIV itself?

Question

UPDATE: Here's a Fiddle: https://jsfiddle.net/720v4zdy/8/

I'm customizing a tumblr blog to match someone's site and it's almost in good shape. We started with a theme that already matched it closely and then made some changes in CSS.

The last problem I can't solve is how to make the navigation bar stretch the entire page while containing all of the links in a max-width of 1024px.

Here's the tumblr blog WIP: http://craftysheepblog.tumblr.com/

I want the navigation bar to stretch the entire page, but the links to be contained with a max-width of 1024px. The trouble here is I only have one DIV to do this with, so I'm not quite sure how to make it happen.

I'm using this currently, which works somewhat. It gets ugly when you make the browser window smaller though.

#top nav {
    background-color: rgb(45, 50, 51);
    color: white;
    text-align: left;
    padding: 11px 22%;
    margin-top: 20px;
    width: 100%;
}

Answer 1

You can set the nav to max width: 1024px and fill the "gaps" on the sides with ::before and ::after pseudo elements. You'll need to hide the overflow on header#top to avoid sideways scrolling, because the pseudo elements are set wider than the content.

This does rely on you setting the height of your nav and following suit with the <a> (height, line-height, etc.) ...

Also - tweak some more; there is a 600px break point in your CSS on the live site that will interfere with this (along with a lot of your extra CSS that I didn't clean up).

body {
  color: rgb(38, 39, 43);
  font-family: "Open Sans", "sans-serif", Arial;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.42857143;
  margin: 0;
}
#top {
  overflow: hidden;
}
#top .title {
  font-family: "Open Sans", "sans-serif", Arial;
  font-size: 30px;
  text-align: left;
  font-weight: lighter;
  margin-top: 18px;
  display: block;
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

#top nav {
  background-color: rgb(45, 50, 51);
  color: white;
  text-align: left;
  max-width: 1024px;
  margin: 50px auto 20px;
  height: 50px;
  width: 100%;
  border-width: 0;
  padding: 0;
  position: relative;
}
#top nav::before{
  background: rgb(45,50,51);
  content: "";
  display: block;
  position: absolute;
  height: 50px;
  width: 100%;
  right: 100%;
}
#top nav::after{
  background: rgb(45,50,51);
  content: "";
  display: block;
  position: absolute;
  height: 50px;
  width: 100%;
  left: 100%;
  top: 0;
}
#top nav a {
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 600;
  margin: 0px 15px;
}

#top nav a {
  color: #fff;
  font-size: 13px;
  text-transform: none;
  font-family: "Open Sans", "sans-serif", Arial;
  font-weight: 300;
  border: 0;
  display: inline-block;
  padding: 0 1em;
  margin: 0;
  height: 50px;
  line-height: 50px;
}

#top nav a:hover {
  color: #52A708;
}

#top .headimg {
  display: none;
}

<header id="top">
  <div class="row">
    <div class="small-12 small-centered columns">
      <a href="/" class="active">
        <div class="title">Page Title</div>
      </a>
      <nav>
        <a class="page" href="#">Link 1</a><a class="page" href="#">Link 2</a><a class="page" href="#">Link 3</a>
      </nav>
    </div>
  </div>
</header>