सीएसएस - कैल्क का उपयोग करके पृष्ठ पर

Question

पर अतिरिक्त स्थान है, मैं दाईं ओर अतिरिक्त स्थान से कैसे छुटकारा पा सकता हूं?

मैंने इनलाइन, inline-block का उपयोग करके केवल फ़्लोटिंग करने का प्रयास किया है, और .left में ऑफ़सेट के बजाय margin-left का उपयोग किया है।

मैंने समस्या निवारण किया और पाया कि यह एचटीएमएल (.content-list { left: calc(50% + 85px); };) है जो समस्या पैदा कर रहा है। लेकिन मुझे नहीं पता कि इसे कैसे ठीक किया जाए।

एचटीएमएल

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

सीएसएस

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

यहाँ fiddle है।

Answer 1

आपकी समस्या एक .content-list ओवरराइड प्रतीत होती है। यदि आप .content-list तत्व का निरीक्षण करते हैं, तो आप देख सकते हैं कि शेष: कैल्क (50% - 85 पीएक्स)द्वारा ओवरराइड किया गया है: 5%! महत्वपूर्ण।

यदि आप ब्राउज़र में एक इंस्पेक्टर का उपयोग करते हैं (क्रोम, फ़ायरफ़ॉक्स, आईई, ओपेरा, सफारी ... सभी ब्राउज़रों में से एक है) तो आप इन समस्याओं को डीबग कर सकते हैं।