Target button element to be static when resizing window in CSS? - css

Question

I have a navbar with a few elements inside it and a button that escapes the navbar when i resize it. What CSS property should I style to keep the button in CSS to stop the button from escaping the navbar?
Attached is a JFiddle of an example of what happens:
https://jsfiddle.net/6Lx0hkfa/
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
float: left;
margin-left: 235px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">[phone]</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
<a href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
</div>
</section>

Answer 1

I don't know what you are trying to achieve, but this one worked for me:
.green-button {
position: absolute;
}

Answer 2

This is a case where I would use float for simplicity. Note that this requires to put the link element on top of the rest of the wrapper's contents within the markup, but it's the most direct solution.
.green-button-link {
float: left;
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
margin-right: 20px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<a class="green-button-link" href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">[phone]</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
</div>
</section>

Answer 3

check the snippet if its what you want.i added description add to ones I added to your code.
* {
margin: 0;
padding: 0;
}
body {
background: url(img/hero_bg.jpg) repeat-y center center fixed;
background size: 100%;
}
#header {
background-color: #1d7cb6;
display: block;
/* position: relative; */
color: white;
width: 100%;
height: 50px;
}
.wrapper {
text-align: center;
margin: 0px auto;
font-family: 'Raleway';
background: white;
z-index: 500;
vertical-align: middle;/* add */
position: relative;/* add */
padding-right: 200px;
}
.address {
display: inline-block;
width: 240px;
float: left;
display: inline-block;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.phone {
display: inline-block;
width: 100px;
float: left;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.email {
width: 150px;
float: left;
display: inline-block;
height: 100%;
padding: 20px 18px;
font-size: 10px;
}
a.social-btn {
width: 20px;
height: 20px;
margin-top: 13px;
float: left;
}
a.social-btn.fb {
background: url("img/facebook#2x.png") 0% 0%/ 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.tw {
background: url("img/twitter#2x.png") 0% 0% / 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.ig {
background: url("img/instagram#2x.png") 0% 0% / 20px 20px no-repeat;
}
a.social-btn.gp {
background: url("img/google#2x.png") 0% 0% / 20px 20px no-repeat;
}
section {
width: 900px;
margin: 0 auto;
}
section#header .wrapper button.green-button {
text-decoration: none;
font-family: 'Raleway';
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
/* float: left; */
right: 0;/* add */
position: absolute;/* add */
/* margin-left: 235px; */
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">[phone]</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social"><a class="social-btn fb" href="http://facebook.com"></a></div>
<div class="social"><a class="social-btn tw" href="http://twitter.com"></a></div>
<div class="social"><a class="social-btn ig" href="http://instagram.com"></a></div>
<div class="social"><a class="social-btn gp" href="https://plus.google.com"></a></div>
<button class="green-button">Book Consultation</button>
</div>
</section>