<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="menu container"> <div style='background: gray; width: 130%; margin-left:-15px; box-shadow: 1px 2px 3px #737373; text-shadow: 1px 2px 3px white; text-align:center;'> <h2>Menu</h2> </div> <div class='container'> <div class='sbmenu'><a href='#'>Home</a><div class='right'><span class='fa fa-home'></span></div></div> <div class='sbmenu'><a href='#'>Services</a><div class='right'><span class='fa fa-gears'></span></div></div> <div class='sbmenu'><a href='#'>Products</a><div class='right2'><span class='fa fa-shopping-cart'></span></div></div> <div class='sbmenu'><a href='#'>Users</a><div class='right'><span class='fa fa-users'></span></div></div> </div> <div><span class='fa fa-copyright'>Azarsammie</span></div> </div>

.menu{ width: 130px; background: #F0FFF0; box-shadow: 1px 2px 3px #737373; } .row{ text-align: center; margin: 0 auto; } .sbmenu{ /*border: 2px solid black;*/ width: 150px; height: 50px; margin-bottom: 10px; background: white; box-shadow: 1px 2px 3px #737373; line-height: 50px; } .right{ background: white; float: right; width: 20%; height: 50px; } .right2{ background:white; float: right; width: 20%; height: 50px; } .right3{ background:#0000FF; float: right; width: 20%; height: 50px; } .fa{ text-align: center; margin: 0 auto; font-weight: 70px; } .sbmenu a{ font-size: 20px; color:#808080; } .sbmenu:hover{ background: #DCDCDC; }