为什么我的元素不在我的弹性容器中？

Question

我正在为我刚刚注册的网络开发公司(这也是我的工作申请投资组合的一部分)构建网站，在我的投资组合页面上，我为客户添加了一个可视化的网站列表，我使用display: flex;和align-items: center;作为包装，但它们似乎不是完全对齐的，左边的差距大于右边的差距，在移动视图中更突出：

​

​

下面是我在标题下面使用的styled-components：

import React from 'react';
import styled, { keyframes } from 'styled-components';
import { Link } from 'react-router-dom';
import { fadeInUp } from 'react-animations';

export const PortfolioContainer = styled.div`
    min-height: 100vh;
    width: 100vw;
    padding-top: 110px;
`

export const PortfolioHeader = styled.h1`
    display: flex;
    justify-content: center;
    color:  ${props => props.txtColor};
`

export const PortfolioWrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: transparent;
    padding-top: 15px;
`

export const PortfolioLinkWrap = styled.div`
    width: 90%;
    height: 80px;
    background: ${props => props.background};
    border-radius: 15px;
    animation: ${props => `${props.num/2}s`} ${keyframes `${fadeInUp}`};
    margin-bottom: 10px;
`

export const PortfolioLinkImg = styled.img`
    height: 80px;
    border-radius: 15px;
`

export const PortfolioLink = styled(Link)`
    color: ${props => props.txtcolor};
    width: 100%;
    height: 80px;
    text-align: center;
    text-decoration: none;
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-gap: 10px;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in-out;
    border-radius: 15px;

    &:hover {
        color: ${props => props.txthovercolor};
        background: ${props => props.hoverbackground};
        transition: 0.3s ease-in-out;
    }
`

下面是React组件：

import React from 'react'
import content from './content.js'
import {
    PortfolioContainer,
    PortfolioLinkWrap,
    PortfolioHeader,
    PortfolioWrapper,
    PortfolioLink,
    PortfolioLinkImg,
} from "./PortfolioElements";

const Portfolio = ({
    highlightTxtColor,
    elementBg,
    elementBg2,
    siteText
}) => {
  return (
    <PortfolioContainer>
        <PortfolioHeader txtColor={highlightTxtColor}>
            Portfolio
        </PortfolioHeader>
        <PortfolioWrapper>
            {content.map((e,i) => (
                <PortfolioLinkWrap 
                    key={e.id} 
                    background={elementBg2}
                    num={i+1}
                >
                    <PortfolioLink 
                        to={e.link}
                        target='_blank'
                        txtcolor={siteText}
                        txthovercolor={highlightTxtColor}
                        hoverbackground={elementBg}
                    >
                    <PortfolioLinkImg
                        src={e.img}
                    />
                        {e.text}
                    </PortfolioLink>
                </PortfolioLinkWrap>
            ))}
        </PortfolioWrapper>
    </PortfolioContainer>
  )
}

export default Portfolio

更新:我发现这是因为PortfolioContainer元素比屏幕更宽。但是，它被设置为width: 100vw;，所以我不知道为什么会这样。我尝试同时设置header和PortfolioWrap元素do display: none;，以确保它们都没有影响到它，但这并没有产生什么影响。

Answer 1

实际上，元素在flex容器中居中，但是PortfoloioContainer的宽度比屏幕更宽。

将max-width:100%添加到PortfoloioContainer中。这将解决这个问题。

希望能帮上忙！