title: Push elements to the extreme bottom right using CSS flexbox
body: <p>I want to have the logo at the bottom right corner fixed at that position no matter the screen size whether the screen size is below 768px or above using CSS.</p>
  <p>Below is an excerpt of the HTML and CSS code I wrote.</p>
  <pre><code>&lt;!DOCTYPE HTML&gt;
   &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
     &lt;title&gt;Document&lt;/title&gt;
  
     &lt;link rel=&quot;stylesheet&quot; href=&quot;index.css&quot; /&gt;
   
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;header&gt;
     &lt;!-- Logo and Menu here--&gt; 
   &lt;/header&gt;
  
   &lt;main&gt;
     &lt;h1 class=&quot;brand-name&quot;&gt;Brand Name Here&lt;/h1&gt;
     &lt;h4 class=&quot;brand-slogan&quot;&gt;Brand Slogan here&lt;/h4&gt;
     &lt;p class=&quot;message&quot;&gt;The message goes here&lt;/p&gt;
  
     &lt;section class=&quot;social-icons&quot;&gt;
       &lt;img src=&quot;&quot; alt=&quot;&quot; /&gt;
       &lt;img src=&quot;&quot; alt=&quot;&quot; /&gt;
       &lt;img src=&quot;&quot; alt=&quot;&quot; /&gt;
       &lt;img src=&quot;&quot; alt=&quot;&quot; /&gt;
       &lt;img src=&quot;&quot; alt=&quot;&quot; /&gt;
  
  
        &lt;img class=&quot;logo&quot; src=&quot;&quot; alt=&quot;&quot; /&gt;
     &lt;/section&gt;
   &lt;/main&gt;
  </code></pre>
     
     
  <p><strong>Excerpt of CSS Code Starts Here</strong></p>
  <p>.brand-name {
  property: value;
  }</p>
  <pre><code>.brand-slogan {
    property: value;
     }
  
   .message {
    property: value;
     }
  
  
    *The Issue is how to place these two (social icons and the logo) side by side and push the logo to the extreme right using css's flexbox*
  
    **.social-icons {
    property: value;
     }
    .logo {
      property: value;
     }**
  </code></pre>
  <p><strong>Exactly how I want it done has been shown in the image below</strong></p>
  <p><a href="https://i.stack.imgur.com/LLDXt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LLDXt.png" alt="enter image description here" /></a></p>