JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></head>
<body>
<section id="about" class="about bg-primary">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>About</h2>
                </div>
            </div>
        </div>
    </section>
    <div id="menu-wrap">
        <ul>
            <li>
                <img id="discover" class="nav-image" src="http://nillabean.com/images/circle-225.png" />
            </li>
            <li>
                <img id="design" class="nav-image" src="http://nillabean.com/images/circle-225.png" />
            </li>
            <li>
                <img id="develop" class="nav-image" src="http://nillabean.com/images/circle-225.png" />
            </li>
            <li>
                <img id="deploy" class="nav-image" src="http://nillabean.com/images/circle-225.png" />
            </li>
        </ul>
    </div>
      <div id="wrap">
        <div class="block">Hi</div>
    </div>
    <button id="button">Push</button>

</body>
</html>

CSS

div.block {
  position:absolute;
  background-color:#abc;
  width:90px;
  height:90px;
  margin:5px;
}
.about {
    padding: 50px 0;
    box-shadow: 0px 6px 8px -2px grey; 
}
#wrap, #menu-wrap {
    width:100%;
    height:100px;
    position:relative;
    border:1px #000 solid;
}

#menu-wrap {
    text-align:center;
    height:235px;
}

ul {
     margin:0px;
     padding:0px;
}

li {
    list-style:none;
    float:left;
    width:25%;
}

JavaScript

$("button").click(function(){
    var x = $(".about").offset().left;
    
    var img_width = $(".about").width();
    var arrow_width = $(".block").width();
  
    var arrow_x = x + img_width/2 - arrow_width/2;
    
    $(".block").animate({
        "left": arrow_x
    }, "slow");
});