I just wrote a media query for phone displays and it's not applying. The code in question is below. For better context, my github page is [here](https://zappacoder.github.io/sgladwin/). What I'd like is for the food pics to stack and take up the entire width of the screen as seen in the first pic at the bottom.

```
@media only screen and (max-width: 480px) {
  .food {
    height: 265px;
    width: 400px;
    padding: 0rem;
    position: relative;
    top: 7rem;
  }
}

```

The media query actually displays somewhat properly when I resize my desktop browser (first pic), but does not work at all on my iPhone 6 (second pic) -- the images are flanked by sizable margins and don't fill the screen. I say "somewhat properly" because there is a large right margin for when the media query applies on the desktop browser -- you'll see it when you resize your browser when the media query takes effect. Not sure why that's happening either. I have a hunch it has to do with how I have my flexbox set up, but I'm not sure.

Here's what I've tried:

-Using the `<meta name="viewport" content="width=device-width,initial-scale=1">` meta tag

-Setting the media query to portrait orientation.

Thanks for any help you can provide!

[![enter image description here](https://i.stack.imgur.com/icJPi.jpg)](https://i.stack.imgur.com/icJPi.jpg)

[![enter image description here](https://i.stack.imgur.com/1K6Ex.jpg)](https://i.stack.imgur.com/1K6Ex.jpg)