CSS - mit calc macht Seite mehr Platz auf der rechten Seite

Question

Wie kann ich den zusätzlichen Platz auf der rechten Seite loswerden?

Ich habe versucht, nur schwebend, mit Inline, inline-block, und margin-left anstelle des Offsets in .left verwendet.

Ich habe Fehler behoben und festgestellt, dass es die html (.content-list { left: calc(50% + 85px); };), die das Problem verursacht. aber ich weiß nicht, wie ich es beheben soll.

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

Hier ist die fiddle.

Answer 1

Ihr Problem scheint eine .content-Listen-Überschreibung zu sein. Wenn Sie das .content-list-Element überprüfen, können Sie sehen, dass links: calc (50% - 85px) wird überschrieben durch eine links: 5%! Wichtig.

Wenn Sie einen Inspektor im Browser verwenden (Chrome, Firefox, IE, Oper, Safari ... alle Browser haben einen), können Sie diese Probleme debuggen.