Ravenous Part One

So I just finished the Ravenous PArt One and I have a totally different looking website its like my css says everything should be in a row… anyone understand how this is posssible seemingly after I followed everything as per the guide?

thats wht it should look like vs how it is actually hehe… hehe thanks in advance.

Hello! Can you post your code, please? To post code on the forums, press this button:


then insert code between the back ticks:
Screen Shot 2020-05-02 at 14.06.13

1 Like
.BusinessList {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 4.4rem 10%;
  }
import React from 'react';
import './BusinessList.css';
import Business from '../Business/Business.js';
class BusinessList extends React.Component{
render(){
    return(
        <div clasName="BusinessList">
  <Business />
  <Business />
  <Business />
  <Business />
  <Business />
  <Business />
</div>
    )
}    
}

export default BusinessList;
import React from 'react';
import './Business.css';
const business={
    imageSrc: 'https://content.codecademy.com/programs/react/ravenous/pizza.jpg',
  name: 'MarginOtto Pizzeria',
  address: '1010 Paddington Way',
  city: 'Flavortown',
  state: 'NY',
  zipCode: '10101',
  category: 'Italian',
  rating: 4.5,
  reviewCount: 90
}

class Business extends React.Component{
    render (){
        return (
            <div className="Business">
  <div className="image-container">
    <img src='https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg' alt=''/>
  </div>
        <h2>{business.name}</h2>
  <div className="Business-information">
    <div className="Business-address">
        <p>{business.address}</p>
        <p>{business.city}</p>
        <p>{business.state}</p>
    </div>
    <div className="Business-reviews">
        <h3>{business.category}</h3>
      <h3 className="rating">{business.rating} stars</h3>
      <p>{business.reviewCount} reviews</p>
    </div>
  </div>
</div>
        )
    }
}
export default Business;
.Business {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 16.66rem;
    margin: 0 .5rem 2.3rem .5rem;
  }
  
  .Business .image-container {
    height: 16.66rem;
    margin-bottom: 1rem;
  }
  
  .Business h2 {
    margin-bottom: .5rem;
    font-size: 1.2rem;
    font-weight: 600;
  }
  
  .Business-information {
    display: flex;
    justify-content: space-between;
  }
  
  .Business-information p {
    font-size: .88rem;
    font-weight: 300;
    line-height: 1rem;
  }
  
  .Business-address {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .Business-reviews {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: right;
  }
  
  .Business-reviews h3 {
    color: #CCA353;
    font-weight: 600;
  }
  
  .Business-reviews .rating {
    font-size: .88rem;
    line-height: 1rem;
  }