Html 我的div'；s don'；t在我的响应网格布局中对齐

这是我到目前为止所拥有的代码笔

/*********基本样式**********/
* {
框大小：边框框；
}
h1{
字体系列：monospace；
边缘顶部：30px；
边缘底部：50px；
文本对齐：居中；
}
p{
边框：1px纯黑；
背景色：#A52A2A；
宽度：90%；
高度：150像素；
右边距：自动；
左边距：自动；
字体系列：Arial、Helvetica、无衬线字体；
颜色：白色；
}
/*简单的响应框架*/
.行{
宽度：100%；
}
/**********仅限大型设备**********/
@介质（最小宽度：1200px）{
.col-lg-1、.col-lg-2、.col-lg-3、.col-lg-4、.col-lg-5、.col-lg-6、.col-lg-7、.col-lg-8、.col-lg-9、.col-lg-10、.col-lg-11、.col-lg-12{
浮动：左；
}
.col-lg-1{
宽度：8.33%；
}
.col-lg-2{
宽度：16.66%；
}
.col-lg-3{
宽度：25%；
}
.col-lg-4{
宽度：33.33%；
}
.col-lg-5{
宽度：41.66%；
}
.col-lg-6{
宽度：50%；
}
.col-lg-7{
宽度：58.33%；
}
.col-lg-8{
宽度：66.66%；
}
.col-lg-9{
宽度：74.99%；
}
.col-lg-10{
宽度：83.33%；
}
.col-lg-11{
宽度：91.66%；
}
.col-lg-12{
宽度：100%；
}
}
/**********仅限中型设备**********/
@介质（最小宽度：992px）和（最大宽度：1199px）{
.col-md-1、.col-md-2、.col-md-3、.col-md-4、.col-md-5、.col-md-6、.col-md-7、.col-md-8、.col-md-9、.col-md-10、.col-md-11、.col-md-12{
浮动：左；
}
.col-md-1{
宽度：8.33%；
}
.col-md-2{
宽度：16.67%；
}
.col-md-3{
宽度：25%；
}
.col-md-4{
宽度：33.33%；
}
.col-md-5{
宽度：41.67%；
}
.col-md-6{
宽度：50%；
}
.col-md-7{
宽度：58.33%；
}
.col-md-8{
宽度：66.67%；
}
.col-md-9{
宽度：75%；
}
.col-md-10{
宽度：83.33%；
}
.col-md-11{
宽度：91.67%；
}
.col-md-12{
宽度：100%；
}
}

模块2解决方案！
我的菜单
项目1

项目2

项目3

将自定义类添加到第三个div。这将允许与自定义类相关的特定重写，而不是全局重写

HTML

---

在您的代码中，

p{width:90%}

妨碍了您的工作

删除该值和

p{margin left}

/

p{margin right}

并添加

p{margin:1rem}

（或添加到所需的值）

检查我的

使用此代码，无需更改任何媒体查询

<div class="col-lg-4 col-md-12 custom-class"><p>Item 3</p></div>

@media (min-width: 992px) and (max-width: 1199px) {
    .col-lg-4.col-md-12.custom-class p{
    
        width: 95%; // modify the width so that it aligns to elements
        margin: 0 auto;
    
    }
}