CSS CSS Alinhar elemento na Esquerda!

[Mizrain Phelipe Sá]

Ola, estou com um problema de alinhamento, pois não consigo alinhar um elemento para ele ficar fixo na esquerda da sua div, já utilizei "flex-end" e tbem não foi, alguém sabe como faço? 

 

Gostaria de alinhar o bloco dos Icones no lado esquerdo.

 

 

<div class="main-content-title row">
        <div style="background-color: #e0f2f1;
    padding: 1em;"><img src="~/images/SSP.png" width="70" /></div>
        <div style="display:flex;flex-wrap:wrap; margin-left: 1.3em;">
            <h2 class="styleTitulo">Bem vindo:</h2>&nbsp;&nbsp;<span class="material-icons" style="padding-top: 1.3em;font-size: 2em;">person</span><h3 class="styleUsuario">@ViewBag.usuarioLogado</h3>
        </div>
        <div class="">
            <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-default" type="button"><i class="material-icons pmd-sm">add</i></button>
           
            <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">star</i></button>
            
            <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-info" type="button"><i class="material-icons pmd-sm">info</i></button>
            
            <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-success" type="button"><i class="material-icons pmd-sm">check</i></button>
        </div>
    </div>

 

.main-content-title {
        background-color: #fff;
        /*padding: 1em;*/
        display: flex;
    }

.styleTitulo {
        margin: 0;
        font-size: 3em;
        text-shadow: 1px 1px 10px rgba(130, 130, 130, 0.5);
        font-family: 'Roboto', sans-serif;
        padding-top: 0.5em;
    }
    .styleUsuario {
        margin: 0;
        font-size: 1.6em;
        text-shadow: 1px 1px 10px rgba(130, 130, 130, 0.5);
        padding-top: 1.7em;
        margin-left: 0.3em;
    }

 

[Adriano_web]

Olá @Mizrain Phelipe Sá boa tarde, tudo bem? Pode usar o justify-content: space-between no elemento com a classe .main-content-title deixando as divs de logo e titulos num <div> próprio, assim:

 

<div class="main-content-title row">
  <div>
    <div style="background-color:#e0f2f1;padding:1em"><img src="~/images/SSP.png" width="70" /></div>
    <div style="display:flex;flex-wrap:wrap; margin-left: 1.3em;">
      <h2 class="styleTitulo">Bem vindo:</h2>&nbsp;&nbsp;
      <span class="material-icons" style="padding-top: 1.3em;font-size: 2em;">person</span>
      <h3 class="styleUsuario">@ViewBag.usuarioLogado</h3>
    </div>
  </div>
  
  <div class="">
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-default" type="button"><i class="material-icons pmd-sm">add</i></button>
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">star</i></button>
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-info" type="button"><i class="material-icons pmd-sm">info</i></button>
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-success" type="button"><i class="material-icons pmd-sm">check</i></button>
  </div>
</div>

 

[Mizrain Phelipe Sá]

@Adriano_web Funciono perfeitamente, obrigado!

4 horas atrás, Adriano_web disse:

Olá @Mizrain Phelipe Sá boa tarde, tudo bem? Pode usar o justify-content: space-between no elemento com a classe .main-content-title deixando as divs de logo e titulos num <div> próprio, assim:

 

<div class="main-content-title row">
  <div>
    <div style="background-color:#e0f2f1;padding:1em"><img src="~/images/SSP.png" width="70" /></div>
    <div style="display:flex;flex-wrap:wrap; margin-left: 1.3em;">
      <h2 class="styleTitulo">Bem vindo:</h2>&nbsp;&nbsp;
      <span class="material-icons" style="padding-top: 1.3em;font-size: 2em;">person</span>
      <h3 class="styleUsuario">@ViewBag.usuarioLogado</h3>
    </div>
  </div>
  
  <div class="">
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-default" type="button"><i class="material-icons pmd-sm">add</i></button>
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">star</i></button>
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-info" type="button"><i class="material-icons pmd-sm">info</i></button>
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-success" type="button"><i class="material-icons pmd-sm">check</i></button>
  </div>
</div>

 

 

[Adriano_web]

Fico feliz por ter lhe ajuda-do @Mizrain Phelipe Sá , caso surjam mais dúvidas fique a vontade em perguntar terei o maior prazer em ajudar