title: Adding more than 100% width to a centered div, the div only expands to the right
body: <p>I am currently trying to re-design a login page for my site. Unfortunately I can't figure out how to set a div above 100% without going over to the right, and not left as well. I have tried many things and can't seem to get it. If someone would be kind enough to explain the CSS rule I am looking for it would be very much appreciated. </p>
  
  <p>See <a href="https://codepen.io/cmpackagingllc/pen/axGzRK" rel="nofollow noreferrer">codpen</a> and snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    "use strict"
  
    var name;
    var loggedin = $(".loggedin").hide();
    var t = 500;
  
    function store() {
      name = $("input#username").val();
    }
  
    function init() {
      $("input[type='submit']").on("click", function() {
        store();
        $(".login_inner, .login_inner__avatar").animate({
          'opacity': '0'
        }, t);
        setTimeout(function() {
          $(".login_inner__check").css({
            'opacity': '1',
            'animation': 'spinner 4s 0s linear',
            'transition': 'all ease 3s'
          });
        });
        setTimeout(function() {
          $(".login_inner__check--complete").find('i').animate({
            'opacity': '1'
          }, 500);
        }, 4200);
        setTimeout(function() {
          $(".login").fadeOut(500, function() {
            $(this).remove();
          });
        }, 5000);
        setTimeout(function() {
          loggedin.fadeIn(t, function() {
            $(this).show();
            $(this).find('h2').html("Welcome " + name);
          });
        }, 5500);
        setTimeout(function() {
          $(".loggedin h2").animate({
            'opacity': '1'
          }, t);
        }, 6000);
      });
    };
    init();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
  }
  
  html, body {
    background: #EDF2F4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .login {
    background: #2B2D42;
    border-radius: 4px;
    width: 300px;
    height: auto;
  }
  .login_inner {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  }
  .login_inner__avatar {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/default-avatar-ponsy-deer.png);
    background-size: cover;
    border: 3px solid #EDF2F4;
    width: 4em;
    height: 4em;
    margin: 0 auto;
    -webkit-transform: translateY(-35px);
            transform: translateY(-35px);
    border-radius: 100%;
  }
  .login_inner__check {
    border: 1px dashed #FFF;
    border-radius: 100%;
    width: 4em;
    height: 4em;
    position: absolute;
    margin: -185px 120px;
    opacity: 0;
    text-align: center;
  }
  .login_inner__check--complete i {
    line-height: 4em;
    color: #FFF;
    opacity: 0;
  }
  .login_inner input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: none;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #33354e;
    width: 100%;
    padding: 1.1em;
    color: #FFF;
    outline: none;
    font-size: 0.9em;
    text-align: left;
  }
  .login_inner input:last-of-type {
    border-bottom: none;
  }
  .login_inner input[type="submit"] {
    width: 110%;
    background: #4ECDC4;
    cursor: pointer;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    text-align: center;
    margin: 3em auto 0 auto;
  }
  
  .loggedin {
    background: #2B2D42;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }
  .loggedin h2 {
    opacity: 0;
    color: #FFF;
    text-align: center;
    font-size: 1.7em;
  }
  
  ::-webkit-input-placeholder {
    color: #FFF;
  }
  
  :-moz-placeholder {
    color: #FFF;
  }
  
  ::-moz-placeholder {
    color: #FFF;
  }
  
  :-ms-input-placeholder {
    color: #FFF;
  }
  
  ::-ms-input-placeholder {
    color: #FFF;
  }
  
  .hide {
    opacity: 0;
  }
  
  .show {
    opacity: 1;
  }
  
  @-webkit-keyframes spinner {
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  
  @keyframes spinner {
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class='login'&gt;
    &lt;div class='login_inner'&gt;
      &lt;div class='login_inner__avatar'&gt;&lt;/div&gt;
      &lt;input id='username' placeholder='Give yourself a username' type='text'&gt;
      &lt;input id='email' placeholder='What is your email?' type='email'&gt;
      &lt;input id='password' placeholder='Choose a password' type='password'&gt;
      &lt;input type='submit' value='Sign up'&gt;
    &lt;/div&gt;
    &lt;div class='login_inner__check'&gt;
      &lt;div class='login_inner__check--complete'&gt;
        &lt;i class='fa fa-check'&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='loggedin'&gt;
    &lt;h2&gt;&lt;/h2&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The above pen is the login page, if you look on line 74 of CSS. I am trying to expand this button to both directions to give a wrap around effect. I can only adjust the right for some reason. I am sure it's an easy solution.</p>
  
  <pre><code>  &amp;[type="submit"] {
      width: 110%;
      background: $c-btn-color;;
      cursor: pointer;
      border-bottom-left-radius: $radius - 2;
      border-bottom-right-radius: $radius - 2;
      text-align: center;
      margin: 3em auto 0 auto;
   }
  </code></pre>
  
  <p>I have tried all different types of positioning, block sizes, etc. I would be very grateful for some advice! </p>
  
  <p>Thank you!</p>