Css元素的边框被剪掉

Question

我正在创建的页面没有任何后端功能，只有html和css（使用React获得经验）github：https://github.com/Metsuge/Kodinu右侧的元素边框已被切除。我不知道元素或元素父元素的大小规则在哪里。

代码：

元素的css：

.text-trip{
    color:#F0F0F0;
    margin-bottom: 25px;
    margin-top: 5px
}
.word-featured{
    opacity:50%;
    color: #F0F0F0;
    margin-bottom:0px;
}
.word-published{
    color:#F0F0F0;
    font-size: 12px;
    opacity: 50%; 
}

.text-trip h1{
    margin-top:0;
    font-weight:400;
    margin-bottom: 5px;
}

.main-winatrip {
    border-radius: 9px;
    padding:20px 45px 20px 45px;
    background-image: url('./images/image.svg') ;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    opacity:80%
}

#button-new-article{
    font-size: smaller;
    font-weight: bolder;
    border-radius: 27px ;
    border: none;
    padding:4px 20px 4px 20px;
    background-color: #E0FBFF;
    color:#5E8A93;
}

.main-featured li {
    list-style: none;
    display: inline-block;
    float:right;
    font-size: small;
    margin-left:20px;
}

.button-article{
    font-size: medium;
    border-radius: 27px ;
    border: none;
    padding:10px 30px 10px 30px;
    background-color: #487682;
    color:#F0F0F0;
    font-weight: bolder;
};

和组件：

const WinATrip = () => {
    return(<>
    <div className='main-winatrip'>
        <div className='top-text'>
            <p className='word-featured'>FEATURED</p>
        </div>

        <p className='text-trip'>
        <h1>Win a trip to USA</h1>
            Participate in the contest and you will be eligible to win a 14-day trip to United States of America with personal guide.
        </p>
        <button className='button-article'>Entry now</button>
    </div>
        </>
    )
}

Subscribe组件几乎是相同的代码，如果我修复Featured，我也应该能够修复另一个。

Answer 1

将其添加到样式表中，以在all元素的width和height中包括边框和填充：

* {
  box-sizing: border-box;
}

如果这弄乱了您的某些元素，您也可以将box-sizing: border-box;添加到某些CSS规则中，以便仅影响特定的元素。