Help With Float, Will not float no matter what i do

HTML-CSS
1
Best Dallas Restaurants

Best Dallas Restaurants

Following are the most liked restaurants in the Dallas area based on their reviews on various online portals.

  </div>
</section>

<section class="album">
  <div class="container">
      <div class="card">
        <img src="images/restaurant1.jpg" alt="Restaurant 1">
        <h2><a href=""> Restaurant 1</a></h2>
        <p>This is a paragraph about Restaurant 1 which explains how different and special they are.</p>
      </div>
      <div class="card">
        <img src="images/restaurant2.jpg" alt="Restaurant 2">
        <h2><a href=""> Restaurant 2</a></h2>
        <p>This is a paragraph about Restaurant 2 which explains how different and special they are.</p>
      </div>
      <div class="card">
        <img src="images/restaurant3.jpg" alt="Restaurant 3">
        <h2><a href=""> Restaurant 3</a></h2>
        <p>This is a paragraph about Restaurant 3 which explains how different and special they are.</p>
      </div>

      <div class="card">
        <img src="images/restaurant4.jpg" alt="Card image cap">
        <h2><a href=""> Restaurant 4</a></h2>
        <p>This is a paragraph about Restaurant 4 which explains how different and special they are.</p>
      </div>
  </div>
</section>

<footer>
  <div class="container">
    <p>Brought to you by Dallas Food Nerds</p>
    <p>Own a restaurant? <a href="mailto:dallasfood@gmail.com">Email us</a> to set up a time for us to visit your restaurant for ratings.</p>
  </div>
</footer>

*{
margin: none;
padding: none;

}
body{
font-size: 16px;

}
.jumbotron{
width: 100%;
background-color:#c75b12;
padding-top: 4em;
padding-bottom: 4em;

}
.jumbotron .container{
max-width: 960px;
text-align: center;
color: white;

}
.album{
background-color: #f2f2f2;

}
.album .container{
max-width: 960px;
align-self: center;
}
.card{
background-color: white;
float: left;
margin-bottom: 2em;
padding: 1em;

}
h2 a{
color: #c75b12;
text-decoration: none;
font-size: 1.6em;

}
.card p{
font-size: 1em;
color: #868e96;

}
footer{
clear:both;
width: 100%;
background-color: #d3d3d3;
padding-top: 3em;
padding-bottom: 3em;
margin-top: 4em;
}
footer p{
color: #868296;
margin-bottom: 1em;
}
footer a{
color: #007bff;
}

2

What won’t float? Plus some of your code aren’t properly formatted.

3

the .card class wont float left. this is an assigment for a class i am a noob when it comes to css and htlm.

4

page-design
page-design1291×1200 447 KB
this is how i want it to look ,

5

but the pics go vert down instead of floating to left like the example above … i have to use float for this assignment

6
  1. The body and html have no margins/paddings and the body font size is 16px.
  2. The section with class jumbotron has full width, background color #c75b12 and padding top and bottom as 4em.
  3. The container inside the jumbotron is max 960px width, aligned to the center of the page horizontally and has the text inside it aligned to the center as well.
  4. The section album has background color of #f2f2f2.
  5. The container inside the section album has the max 960px width and is aligned to the center of the page horizontally.
  6. The divs with class card are floated to the left, have background color white, padding on all four sides of 1em and bottom margin of 2em.
  7. The anchors inside h2 (inside div with class card) are color #c75b12, have no underline and have font size of 1.6em. The p inside divs with class card have font size 1em and color #868e96
  8. The footer is full width and has a background color of #d3d3d3, padding top and bottom of 3em and has top margin as 4em
  9. The paragraph inside footer has color #868296 and bottom margin of 1rem.
  10. The anchors inside the footer are color #007bff with no underline.

and these where the instruction on how the prof want it

7

Well, the only ting that comes to my mind is this. It is a part of larger lesson at w3schools.

8

Post a Codepen with what you have so far.

You need to give the .cards a width. You should also clear the container.

.album .container {
  max-width: 960px;
  align-self: center;
  overflow: hidden;
  margin: auto;
}

.card {
  background-color: white;
  float: left;
  margin-bottom: 2em;
  padding: 1em;
  width: calc(50% - 2em);
}