making it respond

[i can spell html5!]

im having trouble getting my headeresposive and not sure exactly where im going wrong. can make things look ok when fixed but not on moble,anyway

<header id="top_header">

 <IMG STYLE="position:absolute; TOP:0px; LEFT:0px; WIDTH:350px; HEIGHT:130px  "SRC="favorite.jpg">
 <IMG STYLE="position:absolute; TOP:98px; right:14px;    WIDTH:30px; HEIGHT:30px  "SRC="facebook.png">
  
  <IMG STYLE="position:absolute; TOP:98px;  right:65px;     WIDTH:30px; HEIGHT:30px   "SRC="youtube.png">
  <IMG STYLE="position:absolute; TOP:98px;  right:108px;    WIDTH:30px; HEIGHT:30px    "SRC="twitter.png">
 <h1> sitename.com</h1>
<h2>this is some text here.<br>this is the second part of the text.</h2>
</header>

 

and css.

 #top_header{
     position:relative;
    background:   #F5F5F5;
     width:60%;
     left: 350px;
     top: 5px;
     border: .25px  brown; 
     padding: 20px; 
    height:90px;
    border-bottom: 1px solid  black; 
    border-top:  1px solid  black;
    border-left:  1px solid  black; 
    border-right: 1px solid  black;

 }  

  #top_header h1{
     position:relative;
        color:red;
        font-size:225%;
     left: 550px;
     top: -30px; 
     padding: 20px; 
    height:90px;
    

 }  
 
   #top_header h2{
     position:relative;
     width:60%;
     left: 330px;
     top: -105px;
     padding: 20px; 
    height:90px;
 }

@media(max-width: 768px){
top header,top header h1,top header h2
    float:none;
    text-align:center;
    width:100%;
  }