Archiv-Modus von Basti1012 Lösungspage

Hallo zusammen, ich habe folgende Problemstellung: Könnt ihr euch auch hier anschauen: <a href="https://jsfiddle.net/Wolly/k3enyzp2/6/">https://jsfiddle.net/Wolly/k3enyzp2/6/</a> Ich muss jetzt den rechten und linken braunen div jeweils rechts und links bünding machen, ohne das padding zur außengelegenen Seite zu entfernen. Wie würdet ihr das machen ? Danke für die Hilfe.

Code

                                    
                                <style>
  *{
  margin:0;
  padding:0;
}
body{
  height:100vh;
  width:100vw;
  display:flex;
  align-items:center;
  justify-content:center;
}
main{
   height: 200px;
   width: 400px;
   padding: 0 20px;
   display:flex;
}
 .row{
   display:flex;
   width:100%;
 }

.element {
  flex:1;
  background: blue;
}
.something {
  padding: 0 6px;
  height:100%;
}
.content {
  background: brown;
  height:100%;
}
  
</style>
<body>
<main>
 <div class="row">
     <div class="element">
       <div class="something">
         <div class="content">
         
         </div>
       </div>
   </div>
   <div class="element">
       <div class="something">
         <div class="content">
         
         </div>
       </div>
   </div>
   <div class="element">
      <div class="something">
         <div class="content">
         </div>
       </div>
   </div>
 </div>
</main>
</body>

basti1012.bplaced.net

CSS div rechts und links bündig machen

Code