[CSS] Div 안에 margin 적용하면 밖으로 나가는 현상

const TodaySentencePage = () =>{
    return (
        <>
            <NavBar/>
            <Background>
                <OneSentenceContainer>
                    <BookContainer>
                        <BookImage></BookImage>
                        <BookInfo>
                            <BookTitle>뼈가 자라는 여름</BookTitle>
                            <BookTextBox>
                                <BookSentence>슬픔을 병처럼 여기지 않겠다고 말하면서 나는 조금씩 의연해졌다. 슬픔에게도 비밀이 있을거라고. 그 비밀을 추궁하지 않기로 했다.</BookSentence>
                            </BookTextBox>
                            <BookSubtext>저자: 백년의 고독<br/>분야: 소설<br/>출판사: 민음사</BookSubtext>
                        </BookInfo>
                    </BookContainer>
                    <BtnContainer>
                        <Btn>책 보러가기</Btn>
                        <Btn>확인</Btn>
                    </BtnContainer>
                </OneSentenceContainer>
            </Background>
            <FooterBar/>
        </>
    )
}

const OneSentenceContainer = styled.div`
    background-color: white;
    width: 1295px;
    height: 554px;
    border-radius: 50px;
`;

const BookContainer = styled.div`
    display: flex;
    margin: 80px 90px;
`;

왜 BookContainer에 margin값을 주면 밖으로 나가지?
어쨌든 OneSentenceContainer 안에 있으니까 그 안에서 마진이 생겨야되는거 아닌가?
일단 OneSentenceContainer에 padding을 줘서 위치를 맞췄다.

하지만 패딩과 마진을 둘 다 주면 마진이 적용된다.
왤까