포트폴리오 실습 1 질문입니다

[장원]

이렇게 pc 태블릿 모바일 순서대로 핸드폰 이미지가 점점 작아지는걸 미디어쿼리로 구현하는데에는 성공했는데요,
이미지에 float:right 속성을 줬고, pc 레이아웃에서 크기는 width="500" height="500" 을 줬습니다.
float으로 이미지를 띄웠는데도 크기가 450 * 450이 넘어가면 사진처럼 밑에 h2가 왼쪽으로 밀리는 이유를 모르겠습니다..

html 파일

<div class="container">

        <div class="header">
            <div class="header-text">
                <h1 style="margin-top: 0;">Landing Page for Apps</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas veniam necessitatibus porro?
                    Dolores pariatur deserunt vel quos.</p>
                <button class="btn">Show More</button>
            </div>
            
        </div>

        <div class="content">
            <h2>It is the perfect theme for your next Project!</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <button class="btn">Show Portfolio</button>
        </div>

CSS 파일

.header {
    width: 100%;
    height: 700px;
    background-image: linear-gradient(to bottom left, rgb(92, 207, 252), rgb(99, 40, 249));    
    padding-right: 100px;
}
.header-img {
    float: right;
    position: relative;
    bottom: 100px;
    /* 이미지 크기가 450px * 450px 넘어가면 왜 밑에 h2가 망가지냐... */
}
.content {
    width: 100%;
    height: 250px;
    background-color: white;
    text-align: center;
}

@media screen and (max-width: 992px) {
    .header-img {
        width: 400px;
        height: 400px;
        bottom: 0;
    }
}

@media screen and (max-width: 576px) {
    .header-img {
        width: 300px;
        height: 300px;
        top: 100px;
    }
}

[장원]

html 코드 사이에 뭔 이상한게 들어가서 여따 다시 올려용

<div class="container">

        <div class="header">
            <div class="header-text">
                <h1 style="margin-top: 0;">Landing Page for Apps</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas veniam necessitatibus porro?
                    Dolores pariatur deserunt vel quos.</p>
                <button class="btn">Show More</button>
            </div>
            
     

        <div class="content">
            <h2>It is the perfect theme for your next Project!</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <button class="btn">Show Portfolio</button>
        </div>

[codingapple]

<div class="content"> 박스를 <div class="container"> 바깥으로 뺍시다

[글쓴이]

글