basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Hallo Leute, Ich bekomme es nicht hin den Text an die markierten Stellen zu verschieben ohne neue "graue Boxen" zu erstellen.

    Code

                                        
                                    <!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="/image/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="/image/Hauptbild-mit-Rand.jpg" width="20%"></a>
                 </div>
               </div>
             </main>
      <footer>
        Fotter
    </footer>
       </body>
       </html>