如何调整我的博客帖子以达到左右两侧？

问题描述

这是我试图调整其宽度以达到我的屏幕边缘（在移动设备上）的帖子的链接。 https://mybloggertestpage.blogspot.com/p/admin-demo.html

电脑输出正常，但手机端看帖子左右两边空位太多。 Click here for the screenshot of how my post shows on my phone. I am not allowed to embed images to my posts yet

我尝试从我的博主代码中调整宽度。

我将我的 (outer-wrapper 到 100%;) 的值更改了

#outer-wrapper{max-width:100%;Box-shadow:none}
.row{width:100%}

那么， 我将主包装宽度更改为自动

#main-wrapper{width:auto}

我还将文章宽度大小更改为自动。

article.my-wrapz {
    width: auto;
    margin: 0 auto;padding-left: 0!important;    float: none!important;
}

在对代码进行这些更改后，我注意到宽度有所调整，但我的帖子（在移动设备上）的右侧和左侧仍然有更大的空间。

如果我能在这个问题上得到帮助，我会很高兴。我只想让我的帖子到达移动设备屏幕的边缘。

这是我的博客网站（移动视图）的完整 CSS 代码。

<style type='text/css'>
/*----Responsive Design----*/
@media only screen and (max-width: 1060px) {
#outer-wrapper{max-width:100%;Box-shadow:none}
.row{width:100%}
.header-logo{max-width:200px}
#main-wrapper{width:auto}
.sidebar-wrapper{width:30%}
.back-to-top{display:none}
.post-detail {
    background-color: #fff;
    padding: 10px;
      margin-left: 0;}
    .index article.my-wrapz{width:80%}
.uk-featured-post .uk-column2 { width: 23.96%;}
}
@media only screen and (max-width: 979px) {
#header-blog{width:28%}
#header-blog,.header-content{height:80px}
.header-logo{width:auto;float:none;margin:0 auto 15px}
.header-logo img{margin:26px 0; auto}
.header-ads{float:none;margin:0 auto}
.header-menu{width:30%;overflow:hidden;    padding-top: 18px;}
#nav,.header-menu li.home-child{display:none}
.nav-menu .selectnav{display:block!important}
.nav-wrapper{padding-left:10px}
#content-wrapper{margin:15px auto}
#main-wrapper{width:auto}
#ads-top .widget-content {width: 100%;}
.uk-featured-post{margin-bottom:15px}
#ads-home{margin:0 auto 20px}
.sidebar-wrapper{float:left;width:100%;margin-top:15px}
.item .sidebar-wrapper{padding-top:10px}
.footer-sections{padding:15px 0 10px}
.sect-left{width:100%;margin-right:0;margin-bottom:20px}
.sect-left:last-child{margin-bottom:0}
.flickr_widget .flickr_badge_image:nth-of-type(4),.flickr_widget .flickr_badge_image:nth-of-type(8),.flickr_widget .flickr_badge_image:nth-of-type(12){margin-right:10px}
.uk-featured-post .uk-column2 { width: 23.3%;}
article.my-wrapz {
    width: auto;
    margin: 0 auto;padding-left: 0!important;    float: none!important;
}.post-date {
    display: none;
}
.index article.my-wrapz:before {
    content: none;
    height: 100%;
    position: absolute;
    width: 1px;
    left: 59px;
    top: 25px;
    display: block;
    background: rgba(68,68,0.1);
a#slink {line-height: 87px;}
}
.item .post-header,.item .post-footer {width: 90%;margin: 0 auto;}
.item .post-title,.static_page .post-title {font-size: 35px;}
}
@media only screen and (max-width: 767px) {
#outer-wrapper {
    max-width: 100%;
    Box-shadow: none;
} 
#ads-top .widget-content{max-width:100%;height:auto;line-height:0}
#ads-top .widget-content img,#ads-top .widget-content iframe{max-width:100%}
.tm-menu{width:25%}
#nav1{display:none}
#selectnav2{background-color:#292929;height:22px;line-height:22px;padding:2px 5px;font-size:12px;Box-sizing:border-Box;margin-top:7px}
.selectnav{display:block}
.tm-head.tn-right,.pattern,.uk-search-header{display:none}
.Header h1 {font-size: 26px;}
#header-blog { margin-right: 20px;}
#main-wrapper {padding: 40px 0;}
.Box-title h2 {margin: 0 0 40px;}
.typology-button {min-width: 140px;}
.post h2 a {font-size: 32px;}
.index .post,.archive .post {padding-bottom: 0px;}
.post-detail {

  padding: 0px; 
}blockquote {    padding: 10px 10px 10px;font-size: 15px;}

}
@media only screen and (max-width: 620px) {
.uk-featured-post .uk-column1{width:100%;padding-right:0}
.uk-column1 .uk-post-caption{padding:0;float:left}
.uk-featured-post .uk-column2{float:right;width:100%;margin-top:15px}
.uk-featured-post .uk-column2 .item2{float:left;width:48.5%;margin-bottom:0}
.uk-featured-post .uk-column2 .item3{float:right;width:48.5%}
.index article,.archive article{float:left}
.uk-column1 .uk-post-thumb,.uk-column1 .uk-post-thumb .uk-image,.block-image,.block-image .thumb,.block-image .thumb a{width:100%;height:250px;margin-right:0;margin-bottom:15px;float:left}
.index .blog-pager,.index #blog-pager,.archive .blog-pager,.archive #blog-pager{padding:10px 0}
.item .post-title,.static_page .post-title{font-size:24px;line-height:1.4em}
.share-art a{padding:0}
.share-art span{display:none}
.share-art i.fa{margin-right:0!important}
.header-logo img {margin: 30px auto;}
.uk-featured-post .uk-column2 {padding-right: 0px; }
.related li {min-height: 223px;}
}
@media only screen and (max-width: 480px) {
.uk-column1 .uk-post-thumb,.block-image .thumb a{height:220px}
.uk-featured-post .uk-column2 .item2{width:100%}
.uk-featured-post .uk-column2 .item3{float:left;width:100%;margin-top:15px}
.breadcrumbs{line-height:1.5em}
.post h2 a,.item .post-title,.static_page .post-title{font-size:22px}
.related li{width:100%;margin:10px 0 0}
.related li:first-child{margin-top:0}
.cmm-tabs-header h3{font-size:10px}
.sect-left{margin-bottom:15px}
.footer-wrapper #social-footer{margin-right:0;width:100%;text-align:center}
.footer-wrapper #social-footer ul li{display:inline-block;float:none}
.footer-wrapper .copyright{text-align:center;float:left;width:100%;margin-top:5px}
#header-blog {width:42%;}
.header-menu {width: 26%; overflow: hidden;}
.typology-button {
    min-width: 84px;
}
.resumo p {

    font-size: 14px;
}
.item .post,.static_page .post {padding: 10px;}
.my-wrap {
    background: #fff;
    padding: 0;
    margin-top: 0px;
    width: 100%;
    float: none;
    position: relative;
}div#pic1 {
    min-height: auto;
    background: #fff;
    margin: 0 0 20px;
    padding: 0;
    line-height: 0;
}
}
@media only screen and (max-width: 340px) {
.uk-column1 .uk-post-thumb,.block-image .thumb a{height:200px}
.cmm-tabs-header .wrap-tab a{padding:0 7px}
.cmm-tabs.simplyTab .wrap-tab li a{letter-spacing:0}
.footer-sections{padding:15px 0 10px}
.flickr_widget .flickr_badge_image:nth-of-type(4),.flickr_widget .flickr_badge_image:nth-of-type(12){margin-right:0}
}
@media only screen and (max-width: 300px) {
.tm-menu{width:100%}
.social-area{display:none}
.header-logo{float:none;text-align:center;margin:0 auto;min-width:inherit}
.header-ads{display:none}
.header-menu{width:100%}
.nav-wrapper{padding:0 10px}
#selectnav1{width:100%}
.header-random{display:none}
.uk-column1 .uk-post-thumb,.block-image .thumb a{height:160px}
.uk-column1 .uk-post-title,.post h2 a{font-size:18px}
.retitle{margin-bottom:10px}
.item .post-title,.static_page .post-title{font-size:20px}
.error-item{font-size:120px}
.cmm-tabs-header{overflow:hidden}
.cmm-tabs.simplyTab .wrap-tab{float:left}
.cmm-tabs-header .wrap-tab li{float:left;display:inline-block;margin-left:0!important;margin-right:10px;margin-bottom:2px}
.cmm-tabs-header .wrap-tab li:last-child{margin-right:0}
.cmm-tabs.simplyTab .wrap-tab li a{padding:2px 7.55px}
.cmm-tabs-header h3,.sidebar-wrapper,#footer{display:none}
.footer-wrapper #social-footer ul li,.footer-wrapper #social-footer ul li a{margin:0 5px}
}
</style>

解决方法

可以试试这个吗？

#main-wrapper {
  width: 100%;
}

如果只是移动问题，甚至可以在适当的媒体上添加该代码。像这样：

@media (max-width: 1200px){
  #main-wrapper {
    width: 100%;
}
  }

编辑，我想我找到了。将此添加到您的 CSS：

.profile-body {
 margin: 0;
}