保证金/差距＆amp;重新排列按钮

Question

我想移动文字＆＃34; MENU＆＃34;到中心和glyphicon到中心，将glyphicon放在＆＃34; MENU＆＃34;的左边，但是当我移动＆＃34; MENU＆＃34;到中心，它覆盖了整个导航栏中左右两侧的所有内容，我几乎不能再点击这个字形了。

我的第二个问题是， 我如何摆脱这个边际或差距或其他什么？：

导航栏：

    <!-- Navbar -->
        <nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;">
            <div class="container">
                <div class="navbar-header" id="oneDiv">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
                        <span class="glyphicon glyphicon-menu-hamburger" style="color:white"></span>
                    </button>

                <a href="" class="navbar-brand"><font color="white">MENU</font></a>
                </div><!-- Navbar Header -->
                <div class="collapse navbar-collapse" id="navbar-collapse" align="center">
                    <ul class="nav navbar-nav" id="firstOne">
                        <li><a href="#" id="designProcess" role="button" id="designProcess">Design Process</a></li>
                        <li><a href="#" id="profile" role="button" id="profile">Profile</a></li>
                        <li><a href="#" id="contactInfo" role="button" id="contactInfo">Contact Info</a></li>
                    </ul>
                    <ul class="list-inline" id="secondOne">
                        <li><a href="#" class="socialicon"><img src="facebook.png" hspace="30"></a></li>
                        <li><a href="#" class="socialicon"><img src="twitter.png" hspace="30"></a></li>
                        <li><a href="#" class="socialicon"><img src="instagram.png" hspace="30"></a></li>
                    </ul>
                </div>
            </div><!-- End Container img src="twitter.png"-->
        </nav><!-- End navbar -->