css - 有没有更好的方法让这些蓝线横跨文本框的宽度？

Question

在我的 blog site我有这些水平蓝线，我想让它们做的只是跨越文本框的宽度，而我这样做的方式似乎会导致其他问题。我能让它工作的唯一方法是添加这些时髦的边距。是否有更简单的方法使其成为文本框的宽度？

 .date {    
padding: 10px;
margin-left: -42px;
margin-right: -40px;
padding-left: 40px;
display: block;
background: #0076a9;

更新:

@media only screen and (max-width:640px) {
#header, #pageWrapper, #footer {
    padding: 30px 20px;
    margin-bottom: 0px !important;
}  
h1.logo {
    text-align: center;
    padding-bottom: 10px
}
.slide img {
    opacity: 1
}
.sqs-active-slide img {
    opacity:1
}
 img {margin-bottom: 10px;}

.collection-type-gallery #slideshowWrapper .slide img {
    background-color: white !important;
    margin: 2px 0;
}

.hentry {
    background: #F8F9FC;
    padding: 40px;
    border-style: solid;
    border-color: #E2E7F5;
    border-width: 2px
}

Answer 1

将以下 CSS 添加到您的媒体查询(或创建一个新的 CSS)。

@media only screen and (max-width: 640px) {

    .hentry {
        padding:20px;
    }

    .date{
        margin-left: -22px;
        margin-right: -20px;
        padding-left: 22px;
    }

    .collection-type-blog article header .entry-title {
        padding-left:0;
        padding-right:0;
    }

}