css가 이상합니다.2

다른 css는 지우라 하셔서 지웟는데 그래도 크기가 작은건 여전합니다.
.list{
  padding-left: 20px;
  text-align: left;
  border-bottom: 1px solid grey;
}
.black-nav{
  display:flex;
  background: black;
  width:100%;
  color:white;
  padding-left:20px;
}
.modal{
  margin-top:20px;
  padding:20px;
  background-color: #eee;
  text-align: left;
}
/* eslint-disable <-warinig 메시지 안뜨게 해줌는거 */
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
  const [count, setCount] = useState(0)
  let post='ReactBlog';//자동렌더링 안됨
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
 // let [글제목1,b]=useState('남자 코트 추천');//데이터 바껴도 html이 자동 재 렌더링이 됨
  //let [글제목2,함수2]=useState('강남 우동 맛집');
  //let [글제목3,함수3]=useState('파이썬 독학');
  
  //자주변경될거는 State로 만들기!!!
  //배열
  let num=[1,2];
  let a=num[0];
  let c=num[1];
  let [d,e]=[1,2];
  let[따봉,따봉변경]=useState(0);
  function 함수(){
    따봉+=1;
  }
  return (
    <>
    <button onClick={ ()=>{ 
      let copy=[...글제목];//주소를 바꿔서 값 줘라
      copy[0] = '여자코트 추천';
      글제목변경(copy)
    } }> 수정버튼 </button>
    <button onClick={ ()=>{ 
      let copy = [...글제목];
      copy.sort();
      글제목변경(copy)
    } }> 정렬버튼 </button>
      <div className="App">
        
        <div className="black-nav">
          <h4>{post}</h4>  
        </div>
 
        <div className='list'>
        <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span> { 따봉 }</h4>
          <p>2월 17일 발행</p>
        </div>
        <div className='list'>
          <h4>{글제목[1]}</h4>
          <p>2월 17일 발행</p>
        </div>
        <div className='list'>
          <h4>{글제목[2]}</h4>
          <p>2월 17일 발행</p>
        </div>
        <div className='modal'>
          <h4>제목</h4>
          <p>날짜</p>
          <p>상세내용</p>
        </div>
        
        <Modal>
          
        </Modal>
      </div>
    </>
  )
}
export default App
이렇게 수정했는데 다음과 같이 오른쪽에 딱붙는 형태로맘ㄴ 나옵니다,.,