title: CSS file is styling unintended elements
body: <p>Bear with me as I am new to web development and will try to explain my issue properly.</p>
  
  <p>So basically I'm trying to style a certain element on my web page but the issue is that it is also applying that styling to the footer as well, which is not what I want. Here's what I'm trying to achieve:</p>
  
  <pre><code>&lt;div id="message" class="bg-dark"&gt;
  &lt;div class="container-fluid padding"&gt;
    &lt;div class="row text-center padding"&gt;
        &lt;div class="col-md-12 col-lg-6"&gt;
        &lt;h2&gt;CEO's Message&lt;/h2&gt;
        &lt;p&gt;content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-5"&gt;
        &lt;img src="images/ceo.jpg" class="img-fluid"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;hr class="my-4"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, I've even given the id tag to specifically style this div.</p>
  
  <p>and the footer is as follows:</p>
  
  <pre><code>&lt;footer&gt;
    &lt;div class="container-fluid padding"&gt;
      &lt;div class="row text-center"&gt;
        &lt;div class="col-md-4"&gt;
          &lt;img src="images/irco.png"&gt;
          &lt;hr class="light"&gt;
          &lt;p&gt;(+92)51 21301&lt;/p&gt;
          &lt;p&gt;info@irco&lt;/p&gt;
          &lt;p&gt;address&lt;/p&gt;
          &lt;p&gt;address&lt;/p&gt;
          &lt;p&gt;address&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-4"&gt;
          &lt;hr class="light"&gt;
          &lt;h5&gt;Information&lt;/h5&gt;
          &lt;hr class="light"&gt;
          &lt;p&gt;About Us&lt;/p&gt;
          &lt;p&gt;Help Desk&lt;/p&gt;
          &lt;p&gt;Support&lt;/p&gt;
          &lt;p&gt;Privacy Policy&lt;/p&gt;
          &lt;p&gt;Terms &amp; Conditions&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-4"&gt;
          &lt;h5&gt;Subscribe to our newsletter&lt;/h5&gt;
          &lt;p&gt;Stay updated with all the latest updates.&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="col-12"&gt;
          &lt;hr class="light"&gt;
          &lt;h5&gt;&amp;copy; irco&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>And the styling done in the CSS file:</p>
  
  <pre><code>#message h2, p{
      color: white;
      padding-top: 4rem;
  }
  
  footer{
      background-color: #3f3f3f;
      color: #d5d5d5;
      padding-top: 2rem;
  }
  </code></pre>
  
  <p>Now, even that white color and the 4rem padding is being applied to the footer and the padding is being applied in between the <p> elements so everything's all stretched out and I can't figure out what I am doing wrong here. What I want is to just simply apply the white color and the padding to the #message portion and leave the footer alone.</p>