css horizontally center select menu and label
<p>I have a jsfiddle here <a href="https://jsfiddle.net/z0yjvksg/38/" rel="nofollow">https://jsfiddle.net/z0yjvksg/38/</a></p>

<p>Super simple but its driving me mad.</p>

<p>I just need to center the select menu and label (red box) in the container (green box).</p>

<p>I've tried everything I can think of without actually adding padding or margins to push the box across.</p>

<pre><code>    .form{
        border: 1px solid green;
        padding: 10px 0;
    }

    .search-form__by{
        border: 1px solid red;
        display: inline-block;
        margin: 0 auto;
        //text-align: center:

        label{
            float: left;
            margin: 7px 10px 0 0;
        }

        select{
            width: 200px;
        }
    }
</code></pre>