Cannot add margin to my h1 after adding border

Question

My h1 worked fine until I added a border and made it display inline. Now no matter what I try I can't add margin to the top of the h1. Now the whole top of the border is cut off.

https://dash.generalassemb.ly/Astara303/build-your-own-personal-website

If I remove display: inline the header moves back to a spot that makes more sense, but the border stretches across the entire page instead of wrapping around the text.

h1 {
      border: 3px greenyellow solid;
      margin-top: 100px;
      border-width: 8px;
      display: inline;
      padding: 10px;
      border-radius: 25%;
      text-align: center;
      font-size: 90px;
}

did you try setting display to inline-block instead of inline ? — mocni_T, Jun 24 '19 at 13:38

score 0 · Answer 1 · answered Jun 24 '19 at 13:39

0

Add inline-block

h1 {
      border: 3px greenyellow solid;
      margin-top: 100px;
      border-width: 8px;
      display: inline-block;
      padding: 10px;
      border-radius: 25%;
      text-align: center;
      font-size: 90px;
}

answered Jun 24 '19 at 13:39

Lalji Tadhani

14,041
3
23
40

Thank you so much that fixed it right away. This is my first site so many thanks for taking the time :) – Star Jun 24 '19 at 13:41

Cannot add margin to my h1 after adding border

1 Answers1