Why can't I get the nav items to expand to the width of the viewport? One keeps falling under the other three items at 768px. Should I clearfix them somehow or is there a different conflict?

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!

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

Posted March 28, 2016 6:01am by

Why can't I get the nav items to expand to the width of the viewport? One keeps falling under the other three <li>.

Why can't I get the nav items to expand to the width of the viewport? One keeps falling under the other three <li> items at 768px. Should I clearfix them somehow or is there a different conflict?

March 28, 2016 6:03am

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="CSS/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="CSS/style.css">
    <meta name="viewport" content="width=device-width, initial scale=1.0">
    <title>Bright Homes|Property Photography</title>
  </head>
  <body>
    <header class="main-header">
      <img class="logo" src="img/logo.png" alt="Logo">
      <ul class="main-nav">
        <li id="active"><a href="index.html">About Us</a></li>
        <li><a href="booking.html">Booking</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="pricing.html">Pricing</a></li>
      </ul>
    </header>
    <section class="wrapper">
      <div class="primary col">
        <img src="img/interior real estate photography.jpg" alt="">
       <h1></h1>
       <p>At Bright Homes, we take the time necessary to              document the ornate details of real estate and architecture accurately, exposing multiple times to avoid blown out windows, and carefully stitching exposures together behind the computer screen.</p>
      </div>     

    <div class="secondary col">
      <h1>Consistency is Key.</h1>
      <img src="img/real estate services.jpg" alt="">
      <p>Every time you work with us, you'll receive a set of       photos that truly
      represents your home and all of it's best selling           points. After all, our
      goal is to help you sell homes fast, with beautiful presentations of them.</p>
    </div>

    </section>
      <footer class="main-footer">   
        <span class="shooting">Shooting in Naples, Fort Myers, and Cape Coral</span>
        <span class="team">The Team</span>
        <div class="Matthew float">
          <span>Matthew Schad</span>
          <p></p>
        </div>
        <div class="Tyler float">
          <span>Tyler Patterson</span>
          <p></p>
        </div>
    </footer>
  </body>
</html>

```html

```css



/* Web Fonts */
@font-face: {
  font-family: 'Arvo';
  @import url('../fonts/Arvo-Regular.ttf');
}

/*Base Styles*/

.main-header {
  background-color: #e0B390;
  width: 100%;
  padding-bottom: 5px;
  border-bottom: 8px #a2581e dashed;
}

.logo {
  display: block;
  width:70%;
  margin: 0 auto;
}

.main-nav {
  text-align: center;
  padding: 0% 10%;
}

.main-nav li {
  display: block;
  color: #fff;
  font-family: "Oxygen";
  padding: 7px; 0;
}

.main-nav li:hover {
  color:#a2581e;
}

#active {
  color: #ffdf99;
}

.main-nav a {
  text-decoration: none;
  list-style-type: none;
  color: inherit;
}

h1 {
  text-align: center;
  color: #562E10;
  font-family: 'Arvo';
  font-size: 1.5rem;
  font-weight: 300;
}

/* Containers */

.wrapper {
  max-width: 960px;
  padding: 2rem;
  margin: 0 auto;
}

.wrapper p {
  text-align: right;
  text-indent: 50px;
  font-family: "Oxygen";
  word-spacing: 2px;
}

/* Footer Styling */

.main-footer {
  background-color: #e0B390;
  width: 100%;
  padding: 1em 0;
  border-top: 5px #a2581e dotted;
}

.shooting,
.team {
  font-size: .875em;
  text-align: center;
  display: block;
  margin: 20px;
}

div,
div span {
  margin: 0;
}

.shooting {
  font-family: 'Oxygen';
}

.team {
  font-family: 'Arvo';
  font-size: 1.25em;
  text-decoration: underline;
}

/* Image Styling*/

.wrapper div img {
  width: 100%;
  margin: 0 auto;
  display: block;
  border-radius: 7.5px;
}

/* Floats */

.float {
  float: left;
  margin: 0;
  display: inline-block;
  padding: 0;
  width: 40%;
}

.float span {
  text-decoration: underline;
  font-family: 'Arvo';
  font-weight: 100;
}

footer::after {
  content:"";
  display: table;
  clear: both;
}

/* Pricing Table Styling */

.pricing,
.pricing table {
  margin: 0 auto;
  text-align: center;
}

.pricing table thead tr td {
  background-color: #e0b390;
  padding: 6px;
}

tbody td {
  padding: 4px;
}

td, th {
  border: 1px dashed #fff;
  margin: 0 auto;
  padding: 1rem .5rem;
}

.table {
  background-color: #dfc9b8;
  padding: 1rem;
  border-radius: 5px;
  box-shadow: inset 0px 0px 25px rgba(255, 255, 255, 0.6);
  border-collapse: collapse;
  margin: 0 auto;
}

caption {
  margin: 0 auto 15px;
  padding: 0;
  font-family: "Arvo";
}

th {
  font-family: "Oxygen";
}

.price {
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  .table { 
    overflow-x: auto;
    display: block;
  }

  th {
    font-size: 1em;
  }

  td {
    font-size: .8em;
  }
}

@media screen and (min-width: 768px){

  .logo {
    width: 60%;
  }

  .main-nav li {
    display: inline-block;
    padding: 1em 4em;
    background-color: #c48700;
    box-shadow: inset 0px 0px 10px -3px #fff;
  }

.main-nav {
    box-sizing: border-box;
  }  
  }
}

```css

1 Answer

March 28, 2016 3:45pm

One suggestion:

Set the padding for your list items on your 768 break point to: 1em 2em

Then after your 768 breakpoint, add another breakpoint at 968px, then set the padding to 1em 4em for the list items

March 30, 2016 3:15am

Thanks Juan!

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Matthew Schad

Matthew Schad

Why can't I get the nav items to expand to the width of the viewport? One keeps falling under the other three <li>.

Matthew Schad

Matthew Schad

1 Answer

Juan Trujillo

Juan Trujillo

Matthew Schad

Matthew Schad