CSS - sử dụng calc làm cho trang có thêm không gian bên phải

Question

Làm cách nào để loại bỏ khoảng trống thừa bên phải?

Tôi đã thử chỉ nổi, sử dụng nội tuyến, inline-block và sử dụng margin-left thay vì bù trừ trong .left.

Tôi đã khắc phục sự cố và nhận thấy rằng html này (.content-list { left: calc(50% + 85px); };) đang gây ra sự cố. nhưng tôi không biết cách sửa nó.

HTML

 <div class="profile-navbar"> 
     <div class="content-container"> 
      <div class="content-nav"> 
       <ul class="content-list2"> 
        <li class="profile-cog"> 
         <div class="btn-group btn-container" dropdown is-open="status.isopen"> 
          <button type="button" class="btn btn-plain dropdown-toggle profile-btn" dropdown-toggle ng-disabled="disabled"> 
           <span class="glyphicon glyphicon-cog" style="font-size: 15px; padding-right: 5px;"></span> 
           <span class="caret"></span> 
          </button> 
          <ol class="dropdown-menu dropdown-menu-right" role="menu"> 
           <li><a href="#">Edit Account</a></li> 
           <li class="divider"></li> 
           <li><a href="#">Something Else</a></li> 
          </ol> 
         </div> 
        </li> 
       </ul> 
       <ul class="content-list"> 
        <li class="profile-name"> 
         <div> 
          <h4 class="title"> 
           <a class="profile-card-name a-correct-underline a-black">Austin Perez</a> 
          </h4> 
          <h6 class="profile-card-location thin"> 
           Somewhere, United States 
          </h6> 
         </div> 
        </li> 
       </ul> 
       <ul class="content-list3"> 
        <li class="profile-links"> 
         <div class="title h5"> 
          <a class="a-color profile-glyphicon" data-ng-href="#"> 
           <span class="glyphicon glyphicon-globe"></span> 
           <span style="vertical-align: 2px;">Website</span></a> 
         </div> 
         <div class="title h5"> 
          <div> 
           <a target="_blank" class="a-color social-float" href="#"> 
            <span class="icon-facebook icon-facebook-color profile-glyphicon"></span> 
           </a> 
          </div> 
          <div> 
           <a target="_blank" class="a-color social-float" href="#"> 
            <span class="icon-instagram icon-instagram-color profile-glyphicon"></span> 
           </a> 
          </div> 
          <div> 
           <a target="_blank" class="a-color social-float" href="#"> 
            <span class="icon-twitter icon-twitter-color profile-glyphicon"></span> 
           </a> 
          </div> 
         </div> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

CSS

.page-container { 
    padding-top: 62px; 
    position: relative; 
} 

.profile-banner { 
    @include transition(height .5s); 
} 

.profile-nav { 
    padding-bottom: 65px; 
} 

.profile-banner-large, .profile-banner-jum { 
    height: 350px; 
} 

.profile-banner-inner { 
    position: relative; 
    width: 100%; 
    z-index: 4; 
    border-bottom-color: $primary-grey; 
    @include boxShadow($resonance-shadow); 
} 

.profile-banner-pic { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow: hidden; 
} 

.profile-banner-pic img { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: -9999px; 
    bottom: -9999px; 
    margin: auto 0; 
    width: 100%; 
    min-height: 350px; 
} 


.top-container { 
    height: 100%; 
    position: relative; 
} 

.profile-avatar-box { 
    transition: .5s; 
    bottom: -70px; 
    left: calc(50% - 77.5px); 
    position: absolute; 
    transition: bottom .3s; 
    z-index: 3; 
} 

.profile-avatar-tag { 
    outline: 0 none; 
    cursor: pointer; 
    @include boxShadow($resonance-shadow); 
} 

.block { 
    display: block !important; 
} 

.profile-avatar-image { 
    border-radius: 50%; 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 

.profile-avatar { 
    transition: .5s; 
    background: #fff; 
    border: 5px solid #fff; 
    border-radius: 50%; 
    @include boxShadow($resonance-shadow); 
    height: 150px; 
    position: relative; 
    width: 150px; 
} 

@media (max-width: 768px) { 
    .profile-avatar { 
     transition: .5s; 
     height: 100px !important; 
     width: 100px !important; 
    } 
    .profile-avatar-box { 
     transition: .5s; 
     left: 5% !important; 
    } 
} 

.profile-navbar { 
    background-color: #fff; 
    height: 60px; 
    max-height: 60px; 
    border-bottom-color: $primary-grey; 
    @include boxShadow($resonance-shadow); 
} 

.content-container { 
    max-width: 95%; 
    display: block; 
    font-size: 0; 
    text-align: left; 
} 

.btn-plain { 
    background-color: #fff; 
    color: $primary-grey; 
    border-color: $primary-grey; 
    @include transition($tt2); 
    &:hover { 
     border-color: $primary-grey; 
    } 
    &:focus { 
     border-color: $primary-black; 
     color: $primary-black; 
     box-shadow: none; 
    } 
} 

.profile-btn { 
    position: absolute; 
    top: 50%; 
    right: 0; 
} 

.btn-container { 
    position: relative; 
} 

.content-nav { 
    height: 45px; 
    position: relative; 
} 

.profile-cog { 
    box-sizing: border-box; 
    margin-top: 1px; 
    position: absolute; 
    right: 0; 
    top: 10px; 
} 


@media (max-width: 768px) { 
    .content-list { 
     transition: .5s; 
     left: 5% !important; 
     margin-left: 85px; 
    } 
} 
.content-list { 
    display: inline; 
    left: calc(50% + 85px); 
    height: 60px; 
    width: 200px; 
    position: absolute; 
} 

.profile-name { 
    margin-top: -2px; 
} 

.content-list2 { 
    display: inline; 
    float: right; 
    height: 60px; 
    position: relative; 
} 

.content-list3 { 
    display: inline; 
    left: calc(50% - 210px); 
    height: 60px; 
    width: 200px; 
    position: absolute; 
    top: -3px; 
} 
@media (max-width: 768px) { 
    .content-list3 { 
     transition: .5s; 
     display: none; 
    } 
} 

.overflow { 
    overflow: hidden; 
} 

.icon-facebook-color { 
    &:hover { 
     color: #3b5998 !important; 
    } 
} 

.icon-instagram-color { 
    &:hover { 
     color: #3f729b !important; 
    } 
} 

.icon-twitter-color { 
    &:hover { 
     color: #4099FF !important; 
    } 
} 

.social-float { 
    float: left; 
    padding: 0 15px 0 0; 
} 

.profile-glyphicon { 
    font-size: 17px !important; 
} 

Đây là fiddle.

Answer 1

Sự cố của bạn có vẻ là ghi đè danh sách .content. Nếu bạn kiểm tra phần tử .content-list, bạn có thể thấy rằng còn lại: calc (50% - 85px) bị ghi đè bởi bên trái: 5%! Quan trọng.

Nếu bạn sử dụng trình kiểm tra trong trình duyệt (chrome, firefox, IE, opera, safari ... tất cả các trình duyệt đều có một trình duyệt) bạn có thể gỡ lỗi vấn đề này.