0

I am trying to make a page title header, in the middle of my webpage below my navigation bar, then I am trying to make the header border wrap close around the text of the header, so that there is not a lot of padding on the left and the right.

I am able to center the header, I am able to change the font, decoration, etc. of the header, but I cannot figure out why the width of the header cannot be manipulated without the header itself changing its position.

I have tried changing CSS code both in the parent div and the header child, but to no avail, nothing I try seems to work.

I have checked the console to see if some of the code I wrote didn't affect my elements, but the console showed that the code was affecting them.

Please show me where I'm making the mistake...

.title {
  position: relative;
}

.title h1 {
  display: flex;
  justify-content: center;
  position: static;
  font-family: 'Prompt', sans-serif;
  font-size: 40px;
  color: white;
  background-color: black;
  border: 3px solid yellow;
  border-radius: 10px;
}
<div class="title">
  <h1>LOCATIONS</h1>
</div>

This is the code which centers the header, without messing up the position of the header on my page.

Johannes
  • 64,305
  • 18
  • 73
  • 130
kyija
  • 73
  • 7

1 Answers1

1

Move the flex properties to the child container (the h1 is centered within the title div that way) and define 100% width for it:

If you want some (black) space around the text and its border (top, left, right), use padding on the h1, similar as I did below

.title {
  display: flex;
  justify-content: center;
  width: 100%;
}

.title h1 {
    font-family: 'Prompt', sans-serif;
  font-size: 40px;
  color: white;
  background-color: black;
  border: 3px solid yellow;
  border-radius: 10px;
  padding: 6px 4px 0;
}
<div class="title">
  <h1>LOCATIONS</h1>
</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Tried it in my code, doesn't work, but I did try it outside of my code and it did. I think its something else manipulating that block in a weird way, possibly my wrapper, however my wrapper is just padding on both the left and right side of the page... Would that affect this? – kyija Jan 28 '21 at 01:30
  • 1
    No, if the padding is the same on both sides, it wouldn't affect the centering. But maybe there are other elements with the same class name and also additional CSS rules with those (same) selectors? – Johannes Jan 28 '21 at 01:34
  • Holy sh*t my friend, just triple checked my CSS, I was sure that everything that I tried before was commented out, which it was, except for ONE curly bracket. Can't believe that single bracket messed it up for me... Thank you! – kyija Jan 28 '21 at 01:39