[Help!] Background Overlay Disrupting Text

Community
1

Hey all. I’m a graphic designer by trade in my first week of learning html and CSS. I’m building a test landing page and running into an issue…your help would be greatly appreciated!

I created a background image with a color overlay but I can’t get the elements inside the div to align correctly. They display as seen in the image below:

12%20AM
12%20AM1111×331 101 KB

I want the title and button to stack on top of each other but instead the are behaving like they are on a single line of text.

Here’s how we got here :slight_smile:

  #midCTA {
        background-color: yellow;
        border: none;
        padding: 15px 32 px;
        text-align:center;
        text-decoration: none;
        display: inline-block;
        font-size: 15px;
        font-weight: 600;
        width: 225px;
        height: 45px;
        margin-top: 40px;
        z-index: 1;
      }

      .container {
        background: #000 url(batmanblackandwhite.jpg);
        color: #fff;
        width: 100%;
        height: 350px;
        display: flex;
        justify-content: center;
        position: relative;
      }

      .color-overlay {
        width: 100%;
        height: 100%;
        background: #0c264f;
        opacity: .8;
        position: absolute;
      }

      h3 {
        text-align: center;
        font-family: arial;
        font-weight: bolder;
        text-transform: uppercase;
        font-size: 35px;
        letter-spacing: 3px;
        padding-top: 50px;
        z-index: 1;
      }

    <div class="container">
      <h3>Image Overlay</h3>
      <button id="midCTA">HELP SAVE THE WORLD</button>

      <div class="color-overlay"></div>
    </div>
2

Given the margin is different for different browsers, if you want a pixel perfect website, you should overwrite h3 margin