Center buttons horizontally in a div-CodePudding

I have a text box and some buttons to the top left of it. I want those buttons to be directly on top of the text box instead of being to the top left of the text box. Is there any way to do this. I tried justify-content: center but it didn't work. I am trying to make a google doc like app so I need the buttons to be over the text box like google docs.

var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var highlightBtn = document.querySelector("#highlight");

boldBtn.addEventListener("click", function () {
  boldBtn.classList.toggle("inUse");
});

italicBtn.addEventListener("click", function () {
  italicBtn.classList.toggle("inUse");
});

underlineBtn.addEventListener("click", function () {
  underlineBtn.classList.toggle("inUse");
});

highlightBtn.addEventListener("click", function () {
  highlightBtn.classList.toggle("inUse");
});

const changeColorText = (color) => {
  document.execCommand("styleWithCSS", false, true);
  document.execCommand("foreColor", false, color);
};

document
  .getElementById("highlight")
  .addEventListener("click", function () {
    var range = window.getSelection().getRangeAt(0),
      span = document.createElement("span");

    span.className = "highlight";
    span.appendChild(range.extractContents());
    range.insertNode(span);
  });

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  background-color: lightgrey;
}

.userInput {
  margin: 1px;
  padding: 1px;
  width: 1000px;
  height: 700px;
  resize: none;
  font-family: "Segoe UI", sans-serif;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

.inUse {
  background-color: lightblue;
  width: default;
  height: default;
  border-width: thin;
}

button {
  width: 100px;
}

.dropbtn {
  /* background-color: #3498db; */
  color: black;
  /* padding: 16px; */
  /* font-size: 16px; */
  border: none;
  cursor: pointer;
  width: 100px;
  height: 30px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  display: block;
}

.highlight {
  background-color: yellow;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Editor</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <button  onclick="document.execCommand('bold',false,null);">