HTML CSS Reponsive issue

For the header of this site http://new.931thefan.com/
I would like Listen Live to go below the logo when viewing on a mobile device. Right now when viewing on a mobile device the listen live icon is overlapped by the logo.

This code is working fine by itself, but when I place into the theme it
doesn’t work

html

<div class=”wrapper”>
<div id=”one”>
<img class=logo src=”http://931TheFan.com/wp- content/uploads/2015/05/fan-logo-header2.png” alt=”93.1 The Fan” width=”199px” height=”146px”/>
</div>
<div id=”two”>ttest<img src=”http://931TheFan.com/wp-content/uploads/2013/08/listen-live-fan.png&#8221; align=”right” border=”0″></div>
</div>

css

.wrapper {
border : 2px solid #000;
overflow:hidden;
}

.wrapper div {
min-height: 200px;
padding: 10px;
}
#one {
background-color: gray;
float:left;
margin-right:20px;
width:300px;
border-right:2px solid #000;
}
#two {
background-color: black;
overflow:hidden;
margin:10px;
border:2px dashed #ccc;
min-height:170px;
}

@media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
}
IMG.logo {
display: block;
margin-left: auto;
margin-right: auto }
}

Any thoughts on how I could make this work?