Tengo el siguiente problema, la letra N se me sale hacia el borde del flexbox-contenedor, y el boxmodel de Numero1, Numero2 y Numero3 también se me salen hacia el flexbox-contenedor pero solo hacia la parte de abajo, si pueden ejecutenlo en modo pantalla grande para que lo puedan visualizar mejor. Alguien sabe como solucionar este problema?? 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .contenedor-flexbox{
        display: flex; 
        flex-direction: row;
        border: 10px solid black;
        font-size: 50px;
        
    }

    .elemento-flexbox:nth-child(1){
        background: red;
        color: white;
    }

    .elemento-flexbox:nth-child(2){
        background-color: yellow;
        color: red;
    }

    .elemento-flexbox:nth-child(3){
        background-color: gold;
        color: blue;
    }

<!-- language: lang-html -->

        <div class="contenedor-flexbox">
            <div class="elemento-flexbox">Numero 1</div>
            <div class="elemento-flexbox">Numero 2</div>
            <div class="elemento-flexbox">Numero 3</div>
        </div>

<!-- end snippet -->