内部 html div 的宽度不符合预期宽度

Question

我正在为自己构建一个个人页面，使用 React 和库（例如样式组件）进行 React。但是当我构建标题部分时，突然内容开始不按预期运行，内部 div 不再匹配其父级的宽度。代码如下：

import styled from 'styled-components'

export const SectionContainer = styled.section`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 600px;
    overflow: hidden;
`

import styled from 'styled-components'
import { SectionContainer } from '../components/SectionContainer'

const Container = styled.div`
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

    @media (min-width: 501px) {
        img {
            width: 500px;
            height: 550px;
        }
    }

    @media (max-width: 500px) {
        img {
            width: 70%
            min-width: 300px;
            height: 70%
        }
    }

    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px inset;
    overflow: hidden;

    h1 {
        font-size: 2.8rem;
        padding-top: 50px;
        padding-left: 10px;
    }

    h2 {
        font-family: 'Roboto';
        font-size: 1rem;
        padding: 0 10px;
    }

`

const Header = props => {
    return (
        <SectionContainer>
            <Container className='header'>
                    <h1>Eduardo Soares Dutra</h1>
                    <h2>Estudante de Ciência da Computação | Desenvolvedor front-end</h2>
                    <img src="src\media\Code typing-bro.svg" alt="Front-end Dev" />
            </Container>
        </SectionContainer>
    )
}

export default Header

Answer 1

从我在这里看到的情况来看，您似乎已指定对于最小宽度为 501px 或以上的任何设备，容器的宽度设置为 500px。

@media（最小宽度：501px）{
图像{
宽度：500px；
高度：550px；
}
这样

根据我的理解，这将覆盖父容器。