缩放超过100％时页面对齐问题

Question

缩放页面超过100％时，对齐不正确；如果缩放比例为100％，则工作正常，我在其中放一张图片，您会发现其中的区别。

.office-address-details{
    .mr-2{
        color: rgb(0, 195, 255); font-size: 20px;
        margin-left: -13px;
    }
}

<div class="col-12">
                            <div class="office-address-heading">
                                <p class="Address">Communication Details</p>
                            </div>
                            <div class="d-flex align-items-center office-address-details ">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style ="right: 14px;">
                                <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 float-left">
                                    <i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i>
                                    <a style="color: black;" href="tel:1-562-867-5309">{{myprofile?.Phone}}
                                    </a>
                                </div>
                                <div class="d-flex1 col-xs-12 col-sm-12 col-md-8 col-lg-7 align-items-center office-address-details float-right ">
                                    <i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i>
                                    <a style="color: black;" href="mailto:rafael.cepeda@lpl.com">{{myprofile?.Email}}
                                    </a>
                                </div>
                            </div>
                            </div>
                        </div>