aligner les puces des liste à puces

voila le code html:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8" />
         <link rel="stylesheet" href="cv.css" />
         <title>Mon cv</title>
    </head>

    <body>
      <div>   <h1>Mazi Tifaine</h1>
              <p class="introduction">je m'appelle Tifaine Mazi. Je suis active, curieuse, et cherche toujours à aller plus loin dans tout ce que j'entreprend!</p>
              <p> <div class="imageintro"> <a href="image/tifaine.jpg"><img src="image/tifaine1.jpg" alt="photo de Tifaine" title="agrndire un max"/> </a> </div> </p>
      </div>

<div id="conteneur">

   <div class="mon_expérience">
    <h2>Mon expérience</h2>
        <ul> <li> <a href="http://www.ouest-france.fr/bretagne/morlaix-29600/comme-des-soeurs-elles-ont-vecu-un-en-immersion-linguistique-656729" title="échange linguistique"> <strong>en 2013</strong> </a>, je suis partie 6 mois en Allemagne dans une famille d'accueil et j'y ait appris la langue ainsi que l'accent. j'y retourne depuis, tout les ans 3 à 4 semaines.</li>
              <li> <strong>en 2015</strong>, je suis allée 2 mois au canada afin de perfectionner mon anglais. </li>
              <li> <a href="http://www.lycee-jean-mace-lanester.fr/2017/04/04/section-abibac/" title="lycée Francais-Allemand"> <strong>en 2017</strong> </a>, je postule et obtiens ma candidature pour continuer mon apprentissage dans un lycée abibac.</li> </ul> </div>

    <div class="mes_compétences">
      <h2>Mes compétences</h2>
         <ul> <li>Bilingue (Allemand et Francais)</li>
              <li>niveau corect d'anglais</li>
              <li>mention "très bien" au Brevet</li>
              <li>innitiée à la robotique simple (:légomindstorms)</li> </ul> </div>

    <div class="ma_formation">
      <h2>Ma formation</h2>
          <ul> <li> <em>maternelle</em> </li>
                   <li> <em>primaire</em> </li>
                   <li> <em>Collège</em> </li> </ul> </div>

   </div>

         <p class="espace"> <br/> le rete, je l'ai appris avec légomindstorms et OpenClassrom</p>

    </body>
</html>

et mon code css:

a:visited
{
    color: #1A1A1A;
}

@font-face
{
    font-family: 'carringtonregular';
    src: url('fonts/Carrington-webfont.eot');
    src: url('fonts/Carrington-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Carrington-webfont.woff') format('woff'),
         url('fonts/Carrington-webfont.ttf') format('truetype'),
         url('fonts/Carrington-webfont.svg#carringtonregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.espace
{
    margin-left: 610px
}

.introduction
{
    font-family: "carringtonregular";
    color: #FFF
}

h1
{
    color: #00FFFF;
    text-shadow: 5px 5px 6px #90FF9F;
}

.imageintro
{
    display: inline-block;
    border: 5px aqua ridge;
}

h2
{
    color: #00C990;
    text-shadow: 4px 4px 3px #000000;
}

div
{
    text-align: center;
}

body
{
background-image: url("image/espace2.jpg");
}

#conteneur
{
    display: flex;
}

.mon_expérience
{
    margin: auto;
}

.mes_compétences
{
    margin: auto;
}

.ma_formation
{
    margin: auto;
}

Pour le moment, les trois titres (mon expérience, mes compétences, ma formation) se sont réparti sur la page mais ce n'est pas très joli... il ne prenne pas la même largeur sur la page et les point des liste à puce ne sont pas aligner pour chaque parti...

-
Edité par TifaineAzertuiop 20 juillet 2017 à 14:07:49

TifaineAzertuiop

19 juillet 2017 à 14:23:00

bonjour.

je suis en train de faire le "3ème" cv et quand je met mes 3 titre les uns à coté des autres, le début de chaque liste à puces ne s'aligne plus...

je ne sais pas comment faire pour que mes listes à puce s'aligne de nouveau quand je met les uns à coté des autre avec "display: flex;"

merci d'avance pour votre réponse!

-
Edité par TifaineAzertuiop 19 juillet 2017 à 14:23:26

Tifaine

eclairia