title: How can I get an element to ignore padding if I do not know the parent elements padding?
body: <p>I am using the <a href="https://www.w3schools.com/bootstrap/bootstrap_navbar.asp" rel="nofollow noreferrer">bootstrap navbar</a> and am adding custom CSS to it. I am making a button that should fill the navbar for the first 220px. So I want this to ignore the padding for the navbar (or is there a better way), and fill the space with a max/min width of 20px.</p>
  
  <p>This is what I currently have (I want the green box to shift all the way to the lift and fill the top and bottom):</p>
  
  <p><a href="https://i.stack.imgur.com/0NdVu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0NdVu.png" alt="enter image description here"></a></p>
  
  <p>Here is my code for the above image:</p>
  
  <pre><code>.navbar-brand {
    min-width: 220px;
    max-width: 220px;
    background-color: #256545;
    float: left;
  }
  
  &lt;nav class="navbar navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Test&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>