Bloc qui ne s'affiche pas complétement

a marqué ce sujet comme résolu.

Bonsoir, J’essaye depuis quelques heures de mettre un liseré sur ma page et quand je réussi enfin, je m’aperçois que le liseré ne s’affiche pas sur toute la hauteur de la page.

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

<body>
  <header>
  <h1> Zaki Shifty </h1>
  <div id= "i">
  <p> Jeune rêveur </p><br/>
  </div>

     <br/> <a href = "image.jpg" target = "_blank"><img src = "image-mini.jpg" alt= "Miniature"/></a>
  </header>

<div class="lisere">
</div>

<section id= "conteneur">
  <div class="element">
  <h2> Mon expérience </h2>
  <ul>
    <li><strong> De 1990 à 2009 </strong> : je fais parti des "Sans-visages" et
                 tous ce qui j'ai appris parmi eux m'a beaucoup servis pour la suite. </li>
    <li><strong> De 2009 à 2017 </strong> : je suis président des Etats-Unis
                 d'Amérique (oui Barack Obama c'est moi ;)). </li>
    <li><strong> De 2017 à aujourd'hui </strong> : je suis président de la
                 république Française (et oui je suis aussi Emmanuelle Macron). </li>
  </ul>
  </div>

<div class="element">
  <h2><br/> Mes compétences </h2>
  <ul>
    <li> Leader invétéré </li>
    <li> Javascript(seulement les bases) </li>
    <li> Parle japonais(j'ai les rudiments) </li>
  </ul>
</div>

<div class="element">
  <h2><br/> Ma formation </h2>
  <p> J'ai appris sur internet pour ce qui est du Javascript et du japonaise
      mais pour être le leader que je suis aujourd'hui j'ai du me former auprès
      de maîtres expérimenter. </p>
</div>
</section>
</body>
</html>
h1
{
  text-align: center;
  font-size: 45px;
}

#i
{
  text-align: center;
}
h2
{
  color: #993366;
  font-size: 30px;
}

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

}

h1, h2, p, ul
{
  font-family: 'action_manregular', Verdana;
}

p, ul
{
  font-size: 20px;
}

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

img
{
  float: right;
  border: 3px black solid;
  box-shadow: 4px 6px 3px purple;
  font-size: 0;
  margin-right: 5px;
  margin-top: -155px;
}

#conteneur
{
  display: flex;
  justify-content: space-between;
  margin-left: 315px;
}

.element
{
  align-items: center;
  margin: 5%;

}

.lisere
{
  background-image: url("liseré.jpg");
    display: flex;
    flex-direction: column;
    width: 10%;
    height: 100%;
    position: fixed;
    margin-top: -10px;
    margin-left: -10px;
}

J’espère que quelqu’un pourra m’aider.

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte