Cross-browser compatibility width issue - html

Question

this site has been giving me some issues with the width of some elements with cross-browser compatibility for the tablet and phone styling.
The class is .p_phoneand .p_phone a
.p_phone {
font-size: 20px;
width: 145px;
left: 40%;
margin: 0 !important;
height: 30px;
opacity: 1;
top: -4px;
text-align: center;
color: #fff;
position: relative;
}
.p_phone a {
color: #fff;
background-color: #1968a1;
font-weight: 800;
padding: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
Basically, It needs to match the width of this class, which is a image, which it does on chrome and opera, but on safari, firefox, and edge, it does not match, and breaks to the next line.
.p_call {
font-size: 20px !important;
top: -13px;
left: 40%;
width: 145px;
margin: 0;
background-image: url(http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png);
vertical-align: middle;
height: 40px;
line-height: 40px;
text-align: center;
position: relative;
float: left;
padding: 0;
}
Increasing the width to 150px fixes it, but it is then too wide for the image.
How it needs to be:

Answer 1

Try Changing these class's (have checked them on this link provided by you)
.textwidget {
font-size: 18px;
position: relative;
width: 160px;
margin: auto;
}
.p_call {
font-size: 20px !important;
top: -13px;
left: 40%;
margin: 0px;
background-image: url('http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png');
vertical-align: middle;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
float: left;
padding: 0px;
width: 100%;
background-size: 100%;
}
.p_phone {
font-size: 20px;
margin: 0px !important;
height: 30px;
opacity: 1;
top: 27px;
text-align: center;
color: #FFF;
position: absolute;
width: 100%;
left: 40%;
}
.p_phone a {
color: #FFF;
background-color: #1968A1;
font-weight: 800;
padding: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
display: inline-block;
width: 100%;
}
The divs belonging to p_call class and p_phone were not wrapped properly by textwidget class. Hence we have to give two different width's, now since textwidget is wrapping both the class's, they will have same width. Hope it helps. Tested on both chrome and firefox.

Answer 2

Try to add this to your styling block for .p_phone a:
white-space: nowrap;