title: Allowing div to take up full width & vertically centre text that uses another div
body: <p>I'm trying to make it so that the text in each DIV below is vertically centred so there is an equal amount of space above and below the text. I'd also like it so that I could change the colour of the URL so that it's not blue. I would also like for the two of them to be touching, they were but I can't figure out how to get that back.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style&gt;
    .message1 {
      height: 100px;
      width: 100%;
      background-color: #f0f0f0;
    }
  
   .message2 {
      height: 100px;
  margin-top: 50px;
      width: 100%;
      background-color: #3a3a3a;
    }
  &lt;/style&gt;
  
  &lt;style&gt;
  .messagetext {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 20px;
    padding: 0px;
  &lt;/style&gt;
  
  &lt;div class= "message1"&gt;
  
  &lt;div class= "messagetext"&gt;&lt;font size="4" color= "#6d1a76"&gt;&lt;p class="Roboto"&gt;&lt;a href="URL"&gt;URL TEXT&lt;/p&gt;&lt;/font&gt;&lt;/a&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;div class= "message2"&gt;
  
  &lt;div class= "messagetext"&gt;&lt;font size="3" color= "#ffffff"&gt;&lt;p class="Roboto"&gt;TEXT&lt;/p&gt;&lt;/font&gt;&lt;/div&gt;
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It would be good also if they could go to each edge of the screen. There is still space on either side.</p>
  
  <p><a href="https://i.stack.imgur.com/2e9Uk.png" rel="nofollow noreferrer">How it should look.</a></p>
  
  <p>I'd like for it to look like this and have the colour go all of the way to the edge of the screen. I've got nowhere in hours.</p>
  
  <p>Thanks in advance.</p>