Text overflows from its background while responsive

I have a text that overflows from its own background, when it reaches this size it stays like this:

I want the font to be smaller and don't overflow so it looks nice but I can't make it work. I tried putting a fixed width and it didn't work, also I wrote an "!important" and it didn't make a difference but when I use another CSS rules for other content it works after that so I guess the code is working.

The stylesheets are well related:

This is the HTML of the aside:

<aside id="lateralBar" class="clearfix">
    <h3>
        Buscar
    </h3>
    <div id="search">
        <form action="#">
            <input type="text">
            <input type="button" value="L" class="icon">
        </form>
    </div>
    <h3>
        Login
    </h3>
    <div id="login" class="lateralBox">
        <form action="">
            <label id="user" class="icon">U</label>
            <input type="email">

            <label id="password" class="icon">w</label>
            <input type="password">

            <input type="submit" value="Entrar">
            <input type="reset" value="Limpiar">

            <a href="#">Registrate aquí</a>
            <a href="#">¿Has olvidado tu contraseña?</a>
        </form>
    </div>
    <h3>
        Redes sociales
    </h3>
    <div id="socialNetwork" class="lateralBox">
        <div class="twitter">
            <a href="#" class="icon">t</a>
            <p class="overlay">
                Twitter
            </p>
        </div>
        <div class="facebook">
            <a href="#" class="icon">f</a>
            <p class="overlay">
                Facebook
            </p>
        </div>
        <div class="youtube">
            <a href="#" class="icon">y</a>
            <p class="overlay">
                Youtube
            </p>
        </div>
    </div>
    <h3>
        Patrocinadores
    </h3>
    <div id="sponsors" class="lateralBox">

    </div>
</aside>

The normal CSS:

#lateralBar {
    width: 300px;
    min-height: 1200px;
    font-family: "TrebuchetMS";
    float: right;
    margin: 20px;
    margin-right: 82px;
}

#lateralBar h3 {
    display: block;
    width: auto;
    height: 45px;
    line-height: 49px;
    background: url("../img/pxgray.png"), white;
    box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
    font-size: 30px;
    font-family: "BebasNeue";
    font-weight: normal;
    letter-spacing: 2px;
    padding-left: 15px;
    margin-top: 30px;
    margin-bottom: 15px;
}

#lateralBar h3:first-child {
    margin-top: 0px;
}

The responsive CSS:

@media (max-width: 899){
    
    #lateralBar {
        margin-left: 100px;
    }

    #lateralBar h3 {
        font-size: 10px;
    }
}