Text moving to next line without width issues - html

Question

I am completely stumped on an issue I am having. It is the simplest issue, but I just can't locate the issue. I have a line of text with a border around it to act as a button. I increased the text within this and since then half of the text jumps to the next line whenever the viewport is lower than 1200px.
I created a snippet to replicate this, but even that won't help, so this most likely has to be seen live. The area the issue is at is in the "Grow your business with us" section at the very bottom of that section (under the 3 images).
Please view it in a viewport of less than 1200px
What is causing the self made button to be on 2 lines? I have the width set to 100%?
$(function() {
$('#see-all-services-text').animate({
opacity: 1,
left: '0%'
}, 700);
})
#home-img-block-section {
width: 100%;
height: 850px;
}
#see-all-services {
width: 100%;
height: 75px;
text-align: center;
}
#see-all-services-text {
opacity: 0;
font-size: 1.3em;
position: relative;
left: -30%;
}
#see-all-services-text a {
text-decoration: none;
color: #45a5ba;
cursor: pointer;
}
#see-all-services-button {
padding: 15px 20px;
border: 2px solid #45a5ba;
transition: ease-in-out .5s;
}
#see-all-services-button:hover {
border: 2px solid #45a5ba;
color: #FFF;
background: #45a5ba;
transition: ease-in-out .5s;
}
/*---------------------------------------------- MEDIA QUERY 961 - 1200--------------------------*/
#media screen and (min-width: 961px) and (max-width: 1200px) {
#home-img-block-section {
height: 670px;
}
#see-all-services-text {
font-size: 1.2em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-block-section">
<div id="see-all-services">
<div id="see-all-services-text"><span id="see-all-services-button">VIEW ALL WEB DESIGN SERVICES</span></div>
</div>
</div>

Answer 1

It's happening because your button is inline element. Set display:inline-block; to it and remove width:100%;, and everything should be ok.
Your snippet:
$(function() {
$('#see-all-services-text').animate({
opacity: 1,
left: '0%'
}, 700);
})
#home-img-block-section {
width: 100%;
height: 850px;
}
#see-all-services {
width: 100%;
height: 75px;
text-align: center;
}
#see-all-services-text {
opacity: 0;
font-size: 1.3em;
position: relative;
left: -30%;
}
#see-all-services-text a {
text-decoration: none;
color: #45a5ba;
cursor: pointer;
}
#see-all-services-button {
padding: 15px 20px;
display: inline-block;
border: 2px solid #45a5ba;
transition: ease-in-out .5s;
}
#see-all-services-button:hover {
border: 2px solid #45a5ba;
color: #FFF;
background: #45a5ba;
transition: ease-in-out .5s;
}
/*---------------------------------------------- MEDIA QUERY 961 - 1200--------------------------*/
#media screen and (min-width: 961px) and (max-width: 1200px) {
#home-img-block-section {
height: 670px;
}
#see-all-services-text {
font-size: 1.2em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home-img-block-section">
<div id="see-all-services">
<div id="see-all-services-text"><span id="see-all-services-button">VIEW ALL WEB DESIGN SERVICES</span></div>
</div>
</div>