title: Align Input box (name) and Submit Button
body: <p>I just got into html and css recently and am kinda stuck on this one. Im working on a login box and I cannot get the login box and the submit button to be perfectly aligned with each other. </p>
  
  <p>The only way that kind of worked was if I wrote them both on one line like this, then they would be (horizontally) perfectly aligned but I wasnt able to change the space between them:</p>
  
  <p>First attempt (code without the Dot after &lt;): 
  &lt;.input type="text" id="username">submit</p>
  
  <p>Then I worked it out in some other way. It consists of an input type text and an input type submit in my html file. </p>
  
  <p>In my CSS file im first calling the the Class in which all my login Inputs are nisted (.logsec for login section) and then the id of my input type text and input type submit.</p>
  
  <p>The Class is called logsec (for Login section) and my input type submit is called id=Button and my input type text is called id=subinput.</p>
  
  <p>HTML CODE:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  
    &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;link rel="stylesheet" href="css/animate.css"&gt;
    &lt;link rel="stylesheet" href="css/font.css"&gt;
  
  
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Main&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="brandname"&gt;
              &lt;h1 &lt;id="title" class=""&gt;&lt;span id="logo"&gt;Test&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="logsec"&gt;
              &lt;div class="box-header"&gt;
                  &lt;p&gt; login&lt;/p&gt;
          &lt;/div&gt;
  
              &lt;input type="submit" id="button" value="submit" style="float:right"/&gt;
              &lt;input type="text" id="subinput" style="width:100%;"/&gt; 
          &lt;a href="#"&gt;&lt;p class="recover"&gt;Recover Password&lt;/p&gt;&lt;/a&gt;     
              &lt;h3&gt; &lt;a href=".../css/style.css"&gt; &lt;p class="signup"&gt;signup&lt;/a&gt; &lt;/h3&gt; 
                     &lt;footer&gt; &lt;p Class="footer"&gt;LOGIN&lt;/p&gt;&lt;/footer&gt;   
          &lt;/div&gt;                              
  &lt;/body&gt;                            
  
  
  &lt;/html&gt; 
  </code></pre>
  
  <p>CSS CODE:</p>
  
  <pre><code>body {
  
    background-color: grey;
  
    font-size: 30px;
  
    text-align: center;
  }
  
  
  
  .brandname {
  
    margin-top: 300px;
  }
  
  .recover {
  
      font-size: 15px;
  
      text-align: center;
  }
  
  .signup {
  
      font-size: 15px;
  
      text-align: center;
  }
  
  
  
  /*///////////////////// LOGIN BUTTON ///////////////////////////////////////*/
  
  .logsec [id=button] {
  
    vertical-align: top;
  </code></pre>
  
  <p>Would really love if someone could help me out here.
  Im terrible at it but i would Hope someone can help me. </p>
  
  <p>Thanks Guys.</p>