Having trouble w/ inline @media
<p>inline block @media width 100% on resize, isn't working and I'm getting a bit confused, what am I doing wrong.</p>

<pre><code>.port{

        background: rgba(79,79,79,.5);
        max-width: 30%;
        display: inline-block;
        padding: 10px; 
        margin-top: 4px;
 }


      @media screen and (max-width: 1200px)
    { .port 
    { box-sizing: border-box;
    display:block;
    width: 100%;
    }
</code></pre>

<p>I'm pretty sure I'm overlooking something obvious.
I'm looking for there to be three rows of pictures on desktop, and when you use a phone there's a single image instead of a row, at 100%.</p>