Éléments que je n'arrive pas à centrer HTML/CSS

Bonjour / bonsoir,

Je me permet de venir ici car depuis plusieurs jours j'essaye de centrer 3 éléments donc si quelqu'un à ce talent en CSS ce serait super ! :) Je vous met mon code et une image qui reflète mon problème .

HTML :



​<section class="NosInstruments" id="NosInstruments">
        <div class="titre">
                        <h2 class="titre-texte"><span>L</span>es <span>M</span>usiques</h2>
                            <p>hfvhoopkbhrfeifbgfrfiekofrdgbefjofsejiprrfjeokbngjfsjekfnjslednvnjsoevjbvjo. </p>
        </div>
        <div class="contenu">

            <iframe width="500" height="280" src=""> </iframe>
            <iframe width="500" height="280" src=""> </iframe>
        <div class="box">
        <div class="imbox">
            <audio controls preload="metadata" loop unmuted>
                <source src="" type="audio/mpeg">
                <source src="" type="audio/wav">
                <source src="" type="audio/ogg; codecq=vorbis">
            </audio>
        </div>
        <div class="text">
                        <h3>ok</h3>
        </div>
        </div>
        <div class="box">
        <div class="imbox">
            <audio controls preload="metadata" id="musique" loop unmuted>
                <source src="" type="audio/mpeg">
                <source src="" type="audio/wav">
                <source src="" type="audio/ogg; codecq=vorbis">
            </audio>
        </div>
        <div class="text">
                        <h3>ok</h3>
        </div>
        </div>
        <div class="titre">
            <a href="#" class="btn3">Voir Plus</a>
         </div>
        </div>
        </div>

</section>




CSS : 

.btn3{                        // 
    font-size: 1em;
    color: #fff;
    background: #e29c00;
    padding: 10px 20px;
    display: inline-block;
    margin-top: 30px;
    text-decoration: none;			BOUTON "VOIR PLUS"
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.5s;
    margin-left: -305px;
}						

.btn3:hover{
    letter-spacing: 5px;
}						//


.NosInstruments{
    margin-top:-100px;
    border-radius: 10px;

}

.NosInstruments .contenu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
}

.NosInstruments .contenu .box{
    width: 250px;
    margin: 45px;
    border-width:3px;
}

.NosInstruments .contenu .box img{
    position: relative;
    width: 100%;
    height: 300px;
    top: 0;
    left: 0;
    object-fit: cover;
    border-radius: 10px;
}

.NosInstruments .contenu .box h3{
    color: #111;
    font-weight: 400;
    text-align: center;
    
}


.NosInstruments{
    margin-top: 0px;
}

Merci aux personnes qui m'aide ou qui essaye :)