3.8 wrap with a div (HELP)


#1

what am i doing wrong...?

<!DOCTYPE html>
<html>
  <body>
  <div class="nav">
  <div class="container">
	<ul>
	  <li>dan 1</li>
	  <li>browse</li>
	 
	</ul>
	 <ul>
	   <li>sign up</li>
	    <li>Log in</li>
	    <li>Help</li>
	 </ul>
	</div>
	</div>
	<div class="jumbotron">
	<div>
	<h3>Travel</h3>
	<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
	<p><a href="#">See how to travel on Airbnb</a></p>
	</div>
	</div>
	<div class="container">
	<h1>find a place to stay.</h1>
	<p>Rent from people in over 34,000 cities and 192 countries.</p>
    </div>
    </div>
    
    <div><h3>Host</h3>
    <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
    <p><a href="#">Learn more about hosting</a>
    </div>
    
    <div>
    <h3>Trust and Safety</h3>
    <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
    <p><a href="#">Learn about trust at Airbnb</a></p>
    </div>
    
	
  </body>
</html>

#2

Remove the last /div here. You've closed a div that doesn't exist.


#3

Before you add your learn-more and container, you should get all of your content in the expected place. There is some confusion there with your jumbotron and your travel content.

Keeping your matching open/close tags at the same indent level will help you see what you are building.

Here is the overall plan that you are aiming for:

<!DOCTYPE html>
<html>
  <body>

    <div class="nav">
      <div class="container">
      ... your nav code goes in here
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
      ... your jumbotron code goes in here
      </div>
    </div>
    
    <div>
      ... your Travel code goes in here
    </div>

    <div>
      ... your Host code goes in here
    </div>

    <div>
      ... your Trust code goes in here
    </div>

  </body>
</html>

#6

still didn't work can someone correct my code?


#7

i tried that! now what


#8

Please post your updated code so that I can see the changes that you've made.

If you need it: How to post code in this forum.


#9

<!DOCTYPE html>
<html>
  <body>
  <div class="nav">
  <div class="container">
	<ul>
	  <li>dan 1</li>
	  <li>browse</li>
	 
	</ul>
	 <ul>
	   <li>sign up</li>
	    <li>Log in</li>
	    <li>Help</li>
	 </ul>
	</div>
	</div>
	<div class="jumbotron">
	<div>
	<h3>Travel</h3>
	<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
	<p><a href="#">See how to travel on Airbnb</a></p>
	</div>

	<div class="container">
	<h1>find a place to stay.</h1>
	<p>Rent from people in over 34,000 cities and 192 countries.</p>
    </div>
    </div>
    
    <div><h3>Host</h3>
    <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
    <p><a href="#">Learn more about hosting</a>
    </div>
    
    <div>
    <h3>Trust and Safety</h3>
    <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
    <p><a href="#">Learn about trust at Airbnb</a></p>
    </div>
    
	
  </body>
</html>

heres my code now


#10

Your nav div is perfect!

Your jumbotron is still mixed up with your Travel content. You should have this:

    <div class="jumbotron">
      <div class="container">
      ... your jumbotron code goes in here -- your h1 and p elements
      </div>
    </div>
    
    <div>
      ... your Travel code goes in here (h3 and two p elements)
    </div>

Currently you have this:

	<div class="jumbotron">
	<div>
	<h3>Travel</h3>
	<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
	<p><a href="#">See how to travel on Airbnb</a></p>
	</div>

	<div class="container">
	<h1>find a place to stay.</h1>
	<p>Rent from people in over 34,000 cities and 192 countries.</p>
    </div>
    </div>

Do you see the differences?


#11

lol still cant figure this out


#12

In the example that I posted above, we can start by just looking at the differences in line 2.

What the exercise expects to find:

    <div class="jumbotron">
      <div class="container">

What you have:

	<div class="jumbotron">
	<div>

Then we can move down line by line after that.


#13

A post was split to a new topic: 8. Wrap with a div - I am unable to move on


#14

A post was split to a new topic: 5. Wrap with a div