title: How Do I Make These Buttons in a Row Instead of a Column and How Do I Scale Everything?
body: <p>I am kind of new to HTML and CSS so I decided to try and make a new website. I am almost finished but the only issues that I have are that the buttons are in a column instead of a row and whenever I try to view the website in different screen sizes, the text is partially off the screen. I've tried using floats to resolve the button issue but I couldn't seem to understand the actual function and how to use it. I also have 0 clue how to fix the scaling part. Any solution and an explanation about it would be really helpful. Thanks in advance!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body{
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      }
  body{
      min-height: 100vh;
      background: #782F40;
      transition: 3s;
  }
  
  h1{
      color: white;
      font-family:Arial, Helvetica, sans-serif;
      text-align: center;
  
      
  
  }
  
  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
  }
  
  .title{
      
      font-size: 130px;
      color: #FAF9F6;
      font-weight: 700;
      
  
  }
  
  .subtitle{
      color: white;
      font-size: 80px;
      
  }
  
  button{
      margin:7px auto;
      display:block;
      background-color: transparent;
      color: #FAF9F6;
      width: 70px;
      height: 70px;
      border: 5px solid white;
      font-size: 25px;
      border-radius: 50px;
      transition: transform .6s;
      overflow: hidden;
      
  }
  
  
  
  button:hover{
      color:white;
      cursor: pointer;
      transform: scale(1.03);
  }
  
  
  #particles-js{
      width: 100%;
      height: 100%;
      background-color: transparent;
      background-image: url('');
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /&gt;
      &lt;meta http-equiv="expires" content="timestamp"&gt;
      &lt;title&gt;Julian Sanchez&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;script src="https://kit.fontawesome.com/4ce3863cee.js" crossorigin="anonymous"&gt;&lt;/script&gt;
      
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
      &lt;div class="container"&gt;
          &lt;div class="header"&gt;
              &lt;h1&gt;
                  &lt;span class="title"&gt;Julian Sanchez&lt;/span&gt;&lt;br&gt;
                  &lt;span class="subtitle"&gt;CS @ FSU&lt;/span&gt;
              &lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="btn-group"&gt;
                  &lt;form&gt;   
                  &lt;button type="submit" formaction="https://www.google.com/"&gt;
                          &lt;i class="fa-brands fa-linkedin"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/form&gt;    
                          &lt;form&gt;   
                  &lt;button type="submit" formaction="https://www.google.com/&gt;
                          &lt;i class="fa-brands fa-linkedin"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/form&gt;  
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>