Hover moving other elements to the right - html

Question

Whenever my mouse hovers to one of the long <li> elements the other elements move to the right.
Here's the fiddle link :
.footer_links{
margin-top:60px;
}
footer .ourServices{
display: inline-block;
float:left;
margin: 0px -10px 0px 77px;
}
footer .ourServices ul li,a,h3{
text-decoration: none;
color:white;
list-style: none;
}
footer .ourServices .columns_title{
text-transform: uppercase
}
footer .ourServices .columns_title{
margin-bottom:17px;
font-size:23px;
font-family:raleway-regular;
font-weight:lighter;
}
footer .ourServices ul li, h3{
margin-bottom:8px;
font-size:12px;
}
footer .ourServices ul li{
margin-top: 10px;
}
footer ul li:hover{
font-family: 'Open Sans';
font-weight:bold;
}
<div class="footer_links">
<div class="ourServices">
<h3 class="columns_title">Connect</h3>
<ul>
<li>1234 Street Name</li>
<li>Suburb Title</li>
<li>State, Australia 400</li>
<li>Phone:[phone]</li>
<li>fax:[phone]</li>
<li>info#email.com</li>
</ul>
</div>
<div class="ourServices">
<h3 class="columns_title">Our Services</h3>
<ul>
<li>Cotmprehensive geriatric assessment</li>
<li>Falls, mobility problems</li>
<li>Incontinence</li>
<li>Polypharmacy</li>
<li>Osteoporosis</li>
<li>Frailty</li>
</ul>
</div>
<div class="ourServices">
<h3 class="columns_title">Explore</h3>
<ul>
<li>Our Doctors</li>
<li>Treatments</li>
<li>Appointments</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
jsfiddle.net/#&togetherjs=kdkeI5Hnq6

Answer 1

It is because the width of each div is being determined by the width of its contents, and the positioning of the other div is determined by the positioning of the div beside it. The bold hover effect is causing the text within to get wider, which is causing a chain reaction in the positioning of the other elements.
To fix it, set the width of the container so that it won't resize based on its contents:
footer .ourServices {
width: 170px;
}

Answer 2

You Just Set width for your class like this:
footer .ourServices
{
width: 150px;
}