title: How to position –THIS– in a Flex-container?
body: <p>I'm trying to position the "register" as the picture #1... But the only thing I get is picture #2.</p>
  
  <p>The pic#2 is done as we know in a flexbox, reson why is I'm making the site responsive, and the first site I did (pic#1) wasn't responsive.</p>
  
  <p>I don't know if I should mix up "col-" classes to my flexbox code or what. Both pictures are tables. And the one in the flexbox is working fine when the viewport is reduced. I'm using media queries for the responsiveness, pure CSS. Not using frameworks.</p>
  
  <p>How can I freely position anything in a flexbox while keeping everything responsive, if I position elements with padding and margins I won't be able positions anything else there.</p>
  
  <p><a href="https://i.stack.imgur.com/XTmlM.jpg" rel="nofollow noreferrer">This is what I want: (not a flexbox)</a><br>
  <a href="https://i.stack.imgur.com/VBy73.jpg" rel="nofollow noreferrer">This is the most I can get to it: (inside the flexbox)</a></p>
  
  <p>** CSS code for pic# 2 (flexbox childs):**</p>
  
  <pre><code>      /*flex-container*/
            #header {
              position: fixed;
              display: flex;
              flex-wrap: wrap;
              background-color: #343434;
              top: 0;
              right: 0;
              left: 0;
              height: auto;
              padding-left: 10px;
              padding-right: 10px;
              padding-bottom: .3%;
              padding-top: .3%;
              border-bottom: 1px solid white;
              z-index: 1000;
          }
  
      /*flex-childs*/
  /*table*/    #login {
              margin-left: auto;
             }
  
  
   /*td*/      #users {
              width: 100%;
              border: 1px solid #ccc;
              box-shadow: 0px 0px 5px black;
              border-radius: 1px;
              font-size: 12px;
              padding: 2px 2px 2px 2px;
          }
  
     /*td*/     #pass {
              width: 100%;
              border: 1px solid #ccc;
              box-shadow: 0px 0px 5px black;
              border-radius: 1px;
              font-size: 12px;
              padding: 2px 2px 2px 2px;
          }
  
  
  
   /*td*/       #register {
              font-size: 17.5px;
          }
  </code></pre>