有没有更好的方法使这些蓝线跨越文本框的宽度？

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添加到您的媒体查询中（或创建一个新的）。

@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;
    }

}