CSS - using calc makes page have extra space on right

Question

How can I get rid of the extra space on the right?

I have tried just floating, using inline, inline-block, and used margin-left instead of the offset in .left.

I troubleshooted and found that its this html (.content-list { left: calc(50% + 85px); }; ) that is causing the problem. but I do not know how to fix it.

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

Here is the fiddle.

Answer 1

Your problem seems to be a .content-list override. If you inspect the .content-list element, you can see that left: calc(50% - 85px) is overriden by a left: 5% !important.

If you use an inspector in browser (chrome, firefox, IE, opera, safari... all browsers have one) you can debug this problems.