title: Making a rectangle within another rectangle and positioning elements
body: <p>I am trying to code a resume template just to learn the basics about HTML and CSS. However I have a problem when it comes to positioning a rectangle inside another one. I have been searching for hours and how to fix this but not sure why it isn't appearing at all. I wanted the rectangle to appear over the blue one but under the "Name" text as like a highlighting bar. </p>
  
  <p>I believe it has to do with how I am positioning my elements. I tried using z-index as well but none of the changes I am making is working.</p>
  
  <p>Also as a quick follow up, I wanted to know why I can't align the text "Name" in the center of my rectangle. I tried doing text-align:center but that doesn't do anything either. I feel like I am missing a major concept here with both of these problems. Any insight would be appreciated. </p>
  
  <p>I pasted the code I am working with here: <a href="https://jsfiddle.net/Lx09fvcw/1/" rel="nofollow noreferrer">https://jsfiddle.net/Lx09fvcw/1/</a></p>
  
  <p>Specifically this HTML part:</p>
  
  <pre><code>&lt;svg class = "leftBar"&gt;
      &lt;rect id="leftRec"&gt;
          &lt;div class="Name"&gt;Name&lt;/div&gt;
          &lt;div class = "icon"&gt;
              &lt;img src ="img/education.png"&gt;
          &lt;/div&gt;
      &lt;/rect&gt;
  
      &lt;rect id = "rightRec"&gt;&lt;/rect&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>As an edit I originally wanted a rectangle above another one like this: <a href="https://imgur.com/a/eOUGT8n" rel="nofollow noreferrer">https://imgur.com/a/eOUGT8n</a></p>
  
  <p>I am trying to align everything inside an A4 Size Page, but the blue rectangle has a gap between the leftmost part of the A4 page. Since I am not allowed to use absolute, I would just like some insight into how to do that because nothing is working that I am trying online. Not asking for someone to implement it for me but just show me the way as it is a bit confusing. Thanks for the help</p>
  
  <p>Current code: <a href="http://jsfiddle.net/05p9qo7t/1/" rel="nofollow noreferrer">http://jsfiddle.net/05p9qo7t/1/</a></p>