*{
box-sizing: border-box;
}
.header{
text-align: center;
margin: 40px;
font-size: 30px;
}
p#id {
border: 3px solid black;
background-color: gray;
width: 90%;
height: 250px;
font-size: 18px;
color: #fff;
padding-left: 12px;
padding-top: 80px;
padding-right: 12px;
padding-bottom: 10px;
margin: auto;
margin-bottom: 30px;
}
.row {
width: 100%;
}
.col-lg-3 .col-md-3, div.smbox{
position: relative;
float: right;
width: 110px;
height: 30px;
margin-left: 497px;
margin-right: 32px;
background-color: white;
border: 3px solid black;
}
.col-lg-3 .col-md-3, div.smbox, p#normal{
text-align: right;
padding: 0px 16px 60px 0px;
background-color: burlywood;
overflow: hidden;
}
@media (min-width: 992px) {
.col-lg-3{
float: left;
}
.col-lg-3{
width: 33%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-md-3{
float: left;
}
.col-md-3{
width: 50%;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<h1 class="header">OUR MENU!</h1>
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="smbox"><p id="normal">HTML</p></div>
<p id="id">ipsum dolor sit amet consectetur adipisicing elit. Aperiam eum delectus atque nostrum impedit praesentium libero? Officia modi impedit perferendis architecto reiciendis commodi tenetur quia nam enim ipsum! Officia, delectus?</p>
</div>
<div class="col-lg-3 col-md-3">
<div class="smbox"><p id="normal">CSS!</p></div>
<p id="id">ipsum dolor sit amet consectetur adipisicing elit. Exercitationem est totam nulla. Voluptatibus, quis ut voluptatem natus, eum explicabo, placeat voluptates accusantium sapiente reiciendis aliquam eos corporis et rem saepe?</p>
</div>
<div class="col-lg-3 col-md-3">
<div class="smbox"><p id="normal">JavaS</p></div>
<p id="id"> ipsum dolor sit amet consectetur adipisicing elit. Animi necessitatibus, sit repellat aspernatur ratione consectetur maiores architecto adipisci asperiores quos nobis laboriosam voluptate, itaque perferendis eum eligendi dolorum saepe dicta.</p>
</div>
</div>
其他每个盒子的右上角盒子都不在主盒子的右下角。在响应测试过程中，他们未能做到这一点。我尝试了所有其他的可能性，但感觉我做错了什么，代码出现了一些问题。
我希望你这样需要它？我对css进行了编辑。删除了一些填充规则，并添加了居中规则。块中的文本正确居中。
*{
box-sizing: border-box;
}
.header{
text-align: center;
margin: 40px;
font-size: 30px;
}
p#id {
border: 3px solid black;
background-color: gray;
width: 90%;
height: 250px;
font-size: 18px;
color: #fff;
padding-left: 12px;
padding-top: 80px;
padding-right: 12px;
padding-bottom: 10px;
margin: auto;
margin-bottom: 30px;
}
.row {
width: 100%;
}
.col-lg-3 .col-md-3, div.smbox{
position: relative;
float: right;
width: 110px;
/*height: 30px;*/ /*remove this it*/
height: 100%; /*add this it*/
/*margin-left: 497px;*/ /*remove this it*/
/*margin-right: 32px;*/ /*remove this it*/
margin-right: 5%; /*add this it*/
background-color: white;
border: 3px solid black;
}
.col-lg-3 .col-md-3, div.smbox, p#normal{
text-align: center; /*add this it*/
/*padding: 0px 16px 60px 0px;*/ /*remove this it*/
/*background-color: burlywood;*/ /*remove this it*/
overflow: hidden;
}
/*this is nth-child color*/
.row > div:nth-child(1) .smbox {
background-color: burlywood;
}
.row > div:nth-child(2) .smbox {
background-color: red;
}
.row > div:nth-child(3) .smbox {
background-color: green;
}
/*--------------------------*/
@media (min-width: 992px) {
.col-lg-3{
float: left;
}
.col-lg-3{
width: 33%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-md-3{
float: left;
}
.col-md-3{
width: 50%;
}
}<body>
<h1 class="header">OUR MENU!</h1>
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="smbox"><p id="normal">HTML</p></div>
<p id="id">ipsum dolor sit amet consectetur adipisicing elit. Aperiam eum delectus atque nostrum impedit praesentium libero? Officia modi impedit perferendis architecto reiciendis commodi tenetur quia nam enim ipsum! Officia, delectus?</p>
</div>
<div class="col-lg-3 col-md-3">
<div class="smbox"><p id="normal">CSS!</p></div>
<p id="id">ipsum dolor sit amet consectetur adipisicing elit. Exercitationem est totam nulla. Voluptatibus, quis ut voluptatem natus, eum explicabo, placeat voluptates accusantium sapiente reiciendis aliquam eos corporis et rem saepe?</p>
</div>
<div class="col-lg-3 col-md-3">
<div class="smbox"><p id="normal">JavaS</p></div>
<p id="id"> ipsum dolor sit amet consectetur adipisicing elit. Animi necessitatibus, sit repellat aspernatur ratione consectetur maiores architecto adipisci asperiores quos nobis laboriosam voluptate, itaque perferendis eum eligendi dolorum saepe dicta.</p>
</div>
</div>
</body>
THE INNER TOP-RIGHT BOXES OF EVERY OTHER BOX AREN'T STAYING AT THE TOP-RIGHT CORNER OF THE MAJOR BOX. DURING RESPONSIVE TEST, THEY FAIL TO DO THE SAME. I TRIED EVERY OTHER POSSIBILITY BUT IT FEELS LIKE I AM DOING SOMETHING WRONG AND THAT THERE IS SOME ISSUE WITH THE CODE.