Fixing CSS Formatting

Codepen: https://codepen.io/jitifor864/pen/GRvvpeK?editors=1100

I’m trying to figure out some CSS errors I’m having. At the moment, the problems I’m having are:

  1. The text that is being typed out isn’t centered on top of the search bar
  2. If the word gets too long, the bar beneath it begins to expand. How can I keep that bar constant size and not expand if the text gets long
  3. I can’t seem to make the blinker a tiny bit wider and stop at the end of the word (it looks like it goes one extra blank character)

Could I get some help on these? I’m sure these are ‘small’ fixes, just can’t figure it out. Thanks!

// values to keep track of the number of letters typed, which quote to use. etc. Don't change these values.
var i = 0,
    a = 0,
    isBackspacing = false;

// Typerwrite text content. Use a pipe to indicate the start of the second line "|".  
var textArray = [
  "AskReddit", "AskMen", "Gaming", "FemaleFashionAdvice", "Nosleep", "LetsNotMeet", "Technology", "Funny", "Memes", "Politics", "News"
];

// Speed (in milliseconds) of typing.
var speedForward = 100, //Typing Speed
    speedWait = 1000, // Wait between typing and backspacing
    speedBackspace = 25; //Backspace Speed

//Run the loop
typeWriter("typewriter", textArray);

function typeWriter(id, ar) {
  var element = $("#" + id),
      aString = ar[a],
      eHeader = element.children("h1"); //Header element
  
  // Determine if animation should be typing or backspacing
  if (!isBackspacing) {
    
    // If full string hasn't yet been typed out, continue typing
    if (i < aString.length) {
        eHeader.text(eHeader.text() + aString.charAt(i));
        i++;
        setTimeout(function(){ typeWriter(id, ar); }, speedForward);
    }  
    // If full string has been typed, switch to backspace mode.
    else if (i == aString.length) {
      
      isBackspacing = true;
      setTimeout(function(){ typeWriter(id, ar); }, speedWait);
      
    }
    
  // If backspacing is enabled
  } else {
    
    // If either the header, continue backspacing
    if (eHeader.text().length > 0) {
      
      // If paragraph still has text, continue erasing, otherwise switch to the header.
      if (eHeader.text().length > 0) {
        eHeader.addClass("cursor");
        eHeader.text(eHeader.text().substring(0, eHeader.text().length - 1));
      }
      setTimeout(function(){ typeWriter(id, ar); }, speedBackspace);
    
    // If the head has no text, switch to next quote in array and start typing.
    } else { 
      
      isBackspacing = false;
      i = 0;
      a = (a + 1) % ar.length; //Moves to next position in array, always looping back to 0
      setTimeout(function(){ typeWriter(id, ar); }, 50);
      
    }
  }
}
.parent {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
  
.search-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
}
  
.typewriter-wrapper {
      width: 100%;
      text-align: center;
}

.typewriter {
      display: inline-block;
      overflow: hidden;
      border-right: .15em solid orange; 
      white-space: nowrap;
      letter-spacing: .15em;
      animation:
          typing 2s steps(40, end),
          blink-caret .50s step-end infinite;
}
  
.search-form {
      display: flex;
      justify-content: center;
      width: 100%
}
  
.search-input {
      -webkit-appearance: none;
      background-clip: padding-box;
      background-color: white;
      vertical-align: middle;
      border-radius: 0.25rem;
      border: 1px solid #e0e0e5;
      font-size: 1rem;
      line-height: 2;
      padding: 0.375rem 1.25rem;
      -webkit-transition: border-color 0.2s;
      -moz-transition: border-color 0.2s;
      transition: border-color 0.2s;
      margin-bottom: 0;
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: auto;
      align-self: center;
      height: 51px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
}
   
.search-button {
      height: 51px;
      margin: 0;
      padding: 1rem 1.3rem;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
      font-size: 1rem;
      display: inline-block;
      font-weight: 600;
      font-size: 0.8rem;
      line-height: 1.15;
      letter-spacing: 0.1rem;
      background: #F95F5F;
      color: #292826;
      border: 1px solid transparent;
      vertical-align: middle;
      text-shadow: none;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s;
}

.cursor::after {
  content:'';
  display:inline-block;
  margin-left:3px;
  background-color:white;
  animation-name:blink;
  animation-duration:0.5s;
  animation-iteration-count: infinite;
}
h1.cursor::after {
  height:24px;
  width:13px;
}

@keyframes blink-caret {
    from, to { 
        border-color: transparent 
    }
    50% { 
        border-color: orange; 
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
    <div class="search-container">
        <div class="typewriter-container">
            <div class="typewriter" id="typewriter">
              <h1 class="cursor"> </h1>
        </div>
        <form class="search-form" method="GET" action="{% url 'ssearch' %}">
            <input class="search-input" type="search" name="subreddit">
            <button class="search-button" type="submit"> Search </button>
            <!-- <i class="fa fa-search"></i> -->
        </form>
    </div>
</div>

Answer

1 – to center the text you should display .typewriter-container as flex with direction column and align-items as center.

.typewriter-container {
    /* this are new CSS selector rules you'll need to add */
    display: flex;
    flex-direction: column;
    align-items: center;
}

2 – the browser has a default width for input fields which is setting the initial width of your form. Give the form a fixed width, eg. 330px.

.search-form {
    /* Modify this existing rules to set the form width */
    display: flex;
    justify-content: center;
    width: 330px;
}

3 – the blinking border is being spaced by the ::after pseudo element in your h1. Remove the margin of the ::after and set its width to 0 (or whatever spacing you want).

h1.cursor::after {
    /* Modify this existing rules to set the margin and width */
    height: 24px;
    width: 0;
    margin: 0;
}

A forked codepen with the changes can be found here https://codepen.io/jla91ab37103f/pen/GRvvqWe