title: Creating a Football Field in HTML & CSS
body: <p>I'm trying to create a Football Field in HTML &amp; CSS but i'm stuck. I tried debugging this for hours already but to no avail.</p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#EndZone {
    float: left;
    width: 300px;
    height: 500px;
    background-color: red;
  }
  .TopHash div {
    margin-left: 300px;
    width: 30px;
    height: 30px;
    border-right: 1px solid white;
  }
  #MiddleTopHash div {
    margin-top: 170px;
    width: 30px;
    height: 30px;
    border-right: 1px solid white;
    float: left;
  }
  .MiddleBottomHash div {
    margin-top: 270px;
    width: 30px;
    height: 30px;
    border-right: 1px solid white;
    float: left;
  }
  .BottomHash div {
    margin-top: 470px;
    width: 30px;
    height: 30px;
    border-right: 1px solid white;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="FootballField"&gt;
    &lt;div id="EndZone"&gt;&lt;/div&gt;
    &lt;div class="TopHash"&gt;
      &lt;div id="OneYardLineTopHash"&gt;&lt;/div&gt;
      &lt;div id="TwoYardLineTopHash"&gt;&lt;/div&gt;
      &lt;div id="ThreeYardLineTopHash"&gt;&lt;/div&gt;
      &lt;div id="FourYardLineTopHash"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="FiveYardLine"&gt;&lt;/div&gt;
    &lt;div class="TopHash"&gt;
      &lt;div id="SixYardLine"&gt;&lt;/div&gt;
      &lt;div id="SevenYardLine"&gt;&lt;/div&gt;
      &lt;div id="EightYardLine"&gt;&lt;/div&gt;
      &lt;div id="NineYardLine"&gt;&lt;/div&gt;
      &lt;div id="TenYardLine"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="MiddleTopHash"&gt;
      &lt;div id="OneYardLineMiddleTopHash"&gt;&lt;/div&gt;
      &lt;div id="TwoYardLineMiddleTopHash"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="MiddleBottomHash"&gt;
      &lt;div id="OneYardLineMiddleBottomHash"&gt;&lt;/div&gt;
      &lt;div id="TwoYardLineMiddleBottomHash"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="BottomHash"&gt;
      &lt;div id="OneYardLineBottomHash"&gt;&lt;/div&gt;
      &lt;div id="TwoYardLineBottomHash"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Edit:
  How do I get this following CSS rule to get every hash 30px to the right of each other?</p>
  
  <pre><code>.TopHash div {
      left: 300px;
      width: 30px;
      height: 30px;
      border-right: 1px solid white;
  }
  </code></pre>
  
  <p>edit 2:
  This is the result I want:
  <img src="https://upload.wikimedia.org/wikipedia/en/archive/e/ea/20121008173411!American_Football_field_(NFL).png" alt="Football Field"></p>
  
  <p>The only difference is that I want the yard hashes to be 30px away from each other</p>