title: How to lower this image and background without creating a massive margin where nothing can be entered to?
body: <p>Hi can anyone help me I'm trying to have this image and background in the center of my page but also down from the red bar I can only seem to do it with a massive margin which I can't put anything in, any advice would be appreciated thank you.</p>
  <pre><code>HTML:
  &lt;main&gt;
      &lt;img src=&quot;image/cup_coffee.png&quot; alt=&quot;Cup of coffee with raw coffee beans around it&quot; class=&quot;cup_coffee&quot;&gt;
          &lt;span&gt;This is a text&lt;/span&gt;
      &lt;/main&gt;
  
  CSS:
  main{
  background-color: #e6e6e6;
  display: relative;
  margin-left: auto;
  margin-right: auto;
  width: 50%
  </code></pre>
  <p><a href="https://i.stack.imgur.com/qOHZ3.png" rel="nofollow noreferrer">This is what it looks like at the moment</a></p>