Text verschieben

            
               <!DOCTYPE HTML>
   <html>
   <head>
     <link href='https://fonts.googleapis.com/css?family=Poiret+One|Varela+Round' rel='stylesheet' type='text/css'>
     <meta charset="utf-8">
     <style>
      * {
       margin: 0;
       padding: 0;
     }
main , header , footer { 
  width:100%; 
  margin:0px  auto; 
  padding:10px; 
  font-family: 'Poiret One'; 
  line-height:20px;  
  letter-spacing:1px; 
  box-sizing:border-box;
}
main {
       background:white;
  display:flex;
     }
     
   .links,.rechts{
       background:white;
       color: Black;
       display:flex;
       flex:1;
       padding: 1em;
       font-weight: bold;
       text-align: center;

     }
       
main{
  display:flex;
}
     #mywrapper p {
       padding: 10px;
     }
     
    footer{
       padding: 10px;
       background: transparent;
       text-align: right;
       color: black;}
     
  

      #mywrapper h1 {
       background:orange;
       padding: 15px;
       font-family: 'Poiret One';
        text-align:center;
     }      
.ll,.rr{
  flex:1;
  padding:10px;
  background: lightgrey;
}
  
    img{
      flex:1;
       width: 100%;
       border: 0px solid lightgrey;
     }
.ll  p,.ll h2{
  margin-bottom:20px;
} 
     </style>
   </head>

   <body>
     <div id="mywrapper">
       <header>
       
           <h1>Frisch eingetroffen!</h1>
           </header>
         <main>
           <div class="links">
               <div class="ll"> 
                 <h2>Artikel 1</h2><p>Texte die man rein schreiben kannn</p></div>
             <div class="rr">
               <a href="#"><img alt="" src="https://javascript-forum.de/images/Hauptbild-mit-Rand.jpg" width="20%"></a>
             </div>
           </div>
           <div class="rechts">
             <div class="ll">
             
             
              <h2>Artikel 2<h2><p> text text text text text text text text text text</p>
              <p>Hallo, ich bin ein Text der Grösse 5</p>
             </div>
             <div class="rr">
               <a href="#"><img alt="" src="https://javascript-forum.de/images/Hauptbild-mit-Rand.jpg" width="20%"></a>
             </div>
           </div>
         </main>
  <footer>
    Fotter
</footer>
   </body>
   </html>
External Javascript and CSS
