I am learning React and I am trying to simulate this design here: <https://www.figma.com/file/QG4cOExkdbIbhSfWJhs2gs/Travel-Journal?node-id=2%3A2&t=LV3bLPEMOLMR8ksp-0>

[![enter image description here](https://i.stack.imgur.com/cc8yU.png)](https://i.stack.imgur.com/cc8yU.png)

I started working on the project and I more or less finished it.

[![enter image description here](https://i.stack.imgur.com/FRObc.png)](https://i.stack.imgur.com/FRObc.png)

However, I am having trouble

1. Adding a line break after each `trip-div`. I thought I could do so on the ".map" cycle but it breaks. How should I approach it?

```
const trips = data.map(trip=>{
  return (<Trip
    item={trip}
    /> <hr>)
})

```

2. For some reason the `trip-div` is not expanding 100% to the right. It must be something related to max-widht but I can't understand it.

Here is my code: <https://scrimba.com/scrim/c3rDMnUL>

`Trip`

```
export default function Trip(prop){
    return(
        <div className='trip container'>
            <div className="trip-main">
                <img src={prop.item.imageUrl} alt="" className="trip-img" />
            </div>
            <div className="trip-aside">
                <p className="trip-location">{prop.item.location} <a href={prop.item.googleMapsUrl} className="trip-google-maps">View on Maps</a></p>

                <h2 className="trip-title">{prop.item.location}</h2>
                <p className="trip-dates">{prop.item.startDate} - {prop.item.endDate}</p>
                <p className="trip-description">{prop.item.description}</p>
            </div>
        </div>
    )
}

```

`App`

```
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import Nav from "./components/Nav"
import Trip from "./components/Trip"
import data from '../src/assets/data'

const trips = data.map(trip=>{
  return (<Trip
    item={trip}
    />)
})

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <Nav/>
      {trips}
    </div>
  )
}

export default App

```

css

```
* {box-sizing: border-box;}

#root{
  max-width: 600px;
}

body{
  margin: 0;
  font-family: 'Inter';
  background: #FFFFFF;

}

h1,h2,h3,p {
  margin:0
}

.container {
  padding: 0 40px;
}

nav {
  height: 55px;
  background: #F55A5A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.nav-img {
  margin-right: 7px;

}

.nav-title{
  font-style: normal;
  font-weight: 500;
  font-size: 14.4608px;
  line-height: 18px;
  letter-spacing: -0.075em;
  color: #FFFFFF;
}

.trip{
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
  min-width: 100%;
}

.trip-main{
  max-width: 40%;
}

.trip-aside{
  max-width: 60%;
}

.trip-img{
  width: 125px;
  height: 168px;
  border-radius: 5px;

}

.trip-location{
  font-weight: 400;
  font-size: 10.24px;
  line-height: 12px;
  letter-spacing: 0.17em;
  color: #2B283A;
  margin-bottom: 7px;
}

.trip-title{
  font-weight: 700;
  font-size: 25px;
  line-height: 30px;

  color: #2B283A;

  margin-bottom: 7px;
  padding-bottom: 10px;
}

.trip-dates{
  font-weight: 700;
  font-size: 10.24px;
  line-height: 12px;
  margin-bottom: 10px;

  color: #2B283A;  
}
.trip-google-maps{

  font-weight: 400;
  font-size: 10.24px;
  line-height: 12px;
  /* identical to box height */
  text-decoration-line: underline;
  color: #918E9B;

}
.trip-description{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 10.24px;
  line-height: 150%;
  /* or 15px */

  color: #2B283A;

}

```