Question: I have been trying to disable `float:left` in media screen only .   

But its still taking the `float:left`.  

I have `float:left` on none media screen.

```css
@media only screen and (max-width: 600px) {
  .twitter_page {
    padding: 0 108px 0 0;
    margin-left: -3px;
    float: none;
  }
}

.twitter_page {
  float: left;
  padding: 0 218px 0 0;
  /* border: solid; */
  margin-right: -109px;
  margin-left: 54px;
}
```

```html
<div class="twitter_page">
  <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 350px; height: 400px; padding: 0px; border: none; max-width: 100%; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px;"
    data-widget-id="profile:AZLily_official" title="Twitterタイムライン"></iframe>
  <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
```

Website [Link](http://azlily.bex.jp/eccube_1/html/)

Answer: 
Your CSS is parsed from top to bottom. Put the media query at the bottom of your document and you will get what you want.

```css
.twitter_page {
  float: left;
  padding: 0 218px 0 0;
  /* border: solid; */
  margin-right: -109px;
  margin-left: 54px;
}

@media only screen and (max-width: 600px) {
  .twitter_page {
    padding: 0 108px 0 0;
    margin-left: -3px;
    float: none;
  }
}
```

```html
<div class="twitter_page">
  <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 350px; height: 400px; padding: 0px; border: none; max-width: 100%; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px;"
    data-widget-id="profile:AZLily_official" title="Twitterタイムライン"></iframe>
  <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
```
There is nothing wrong with your css but positioning problem. you wrote media css first then normal css, so in this case media css will override by normal css.

Try this

```
.twitter_page {
    float: left;
    padding: 0 218px 0 0;
    margin-right: -109px;
    margin-left: 54px;
}
@media only screen and (max-width: 600px){
    .twitter_page{
        padding: 0 108px 0 0;
        margin-left: -3px;
        float: none;
    }
}

```