Html Panel not responsive

Question

<asp:PlaceHolder ID="phFbLearnMore" runat="server" Visible="false">
<div class="divFBlearnMore" id="divFBlearnMoreId">
<span class="fbTextContent">Increase exposure to your job postings by sending them to the Facebook Jobs Marketplace.</span>
<button id="FbButtonLink" class="fbButtonContent" >Opt In</button>
<span> <button id="closeButton" class="CloseButtonContent">X</button></span>
</div>
</asp:PlaceHolder>

Below is the css file

.divFBlearnMore {
position: absolute;
padding-bottom: 7px;
color: white;
z-index: 1;
width: 130%;
height: 35px;
float: right;
border: 1px solid #0f9fd8;
background-color: #0f9fd8;
font-size: 14px;
margin-top: -84px;
margin-left: -281px;
padding-top: 14px;
word-wrap: break-word;
padding-left: 74px;
}
.fbTextContent {
position: relative;
margin-left: 70px;
word-wrap:break-word;
}
.fbButtonContent {
position: relative;
cursor: pointer;
border: 1px solid #FFFFFF;
background-color: #0f9fd8 ;
color: #FFFFFF;
border-radius: 3px;
margin-left: 770px;
margin-bottom: 50%;
padding-left: 37px;
padding-right: 37px;
padding-top: 6px;
padding-bottom: 5px;
word-wrap:break-word;
font-size:12px;
}
.CloseButtonContent {
position: absolute;
cursor: pointer;
color: #FFFFFF;
background-color: #0f9fd8;
border: 1px solid #0f9fd8;
float: right;
margin-left:31px;
padding-top: 6px;
word-wrap: break-word;
}

How to make a responsive code which will support and not break in any resolution