我正在学习React，并尝试在此模拟此设计：https://www.figma.com/file/QG4cOExkdbIbhSfWJhs2gs/Travel-Journal?node-id=2%3A2&t=LV3bLPEMOLMR8ksp-0

我开始着手做这个项目，差不多完成了。

不过，我遇到了麻烦
1.在每个trip-div后面添加一个换行符。我以为我可以在“.map”循环中这样做，但是它中断了。我应该如何处理它？

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

1.由于某种原因，trip-div没有100%向右扩展。这一定是与max-widht有关的东西，但我不明白。
下面是我的代码：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;
    
}