css가 이상합니다.

[민]

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}
.App{
  text-align:center;
}
div{
  box-sizing: border-box;
}
.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;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

========================================================================

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 [글제목1,b]=useState('남자 코트 추천');//데이터 바껴도 html이 자동 재 렌더링이 됨
  let [글제목2,함수2]=useState('강남 우동 맛집');//데이터 바껴도 html이 자동 재 렌더링이 됨
  let [글제목3,함수3]=useState('파이썬 독학');//데이터 바껴도 html이 자동 재 렌더링이 됨
  
  //자주변경될거는 State로 만들기!!!
  let num=[1,2];
  
  let a=num[0];
  let c=num[1];
  let [d,e]=[1,2];

  return (
    <>
      <div className="App">
        
        <div className="black-nav">
          <h4>{post}</h4>
        </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='list'>
          <h4>{글제목3}</h4>
          <p>2월 17일 발행</p>
        </div>
       

      </div>

    </>
  )
}

export default App

이렇게 짯는데 css가 가운대로 몰리고 화면에 가득 안찹니다. 

[codingapple]

.App{
  text-align:center;
}
같은 원래있던 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

이렇게 수정했는데 다음과 같이 오른쪽에 딱붙는 형태로맘ㄴ 나옵니다,., 

[codingapple]

index.css에 있는 내용도 지워봅시다

[글쓴이]

글