Can't position button element-CodePudding

I created a submit button using bootstrap but I want to place it where the arrow pointing but I no matter what I write the position doesn't change it's like the button stick to the position and I can't reposition it how can I place it to be there?

.container {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  /*give the text bolder font*/
  font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 12px 10px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  /*set the space from left to 30%*/
  margin-left: 30%;
}
/* set the button under the input element*/
button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /*set the space from left to 30%*/
  margin-left: 30%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>quiz</title>
    <link rel="stylesheet" href="quiz2.css">

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

</head>
<body>
  <div >
    <span id="question">What type of file do you need to open javascript file ?</span>
    <div >
      <input type="text" id="answer"  placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
    </div>
    <button type="button" id="submit" >Submit</button>
  </div>

CodePudding user response：

If you're able to change the HTML, here's a way:

Wrap your button inside another div:

<div >
   <button type="button" id="submit" >Submit</button>
</div>

Then set the margin-left on that wrapper:

.button-wrapper {
  /*set the space from left to 30%*/
  margin-left: 30%;
}

Check this snippet for the result.

.container {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-50%, -50%);
  /*give the text bolder font*/
  font-weight: bold;
}


/*set the input under the span element*/

input[type=text] {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 12px 10px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  /*set the space from left to 30%*/
  margin-left: 30%;
}


/* set the button under the input element*/

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button-wrapper {
  /*set the space from left to 30%*/
  margin-left: 30%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>quiz</title>
  <link rel="stylesheet" href="quiz2.css">

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

</head>

<body>
  <div >
    <span id="question"></span>
    <div >
      <input type="text" id="answer"  placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
    </div>
    <div >
      <button type="button" id="submit" >Submit</button>
    </div>
  </div>

CodePudding user response：

I just define a button-container class and use flex & justify:

.container {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  /*give the text bolder font*/
  font-weight: bold;
}


/*set the input under the span element*/

input[type=text] {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 12px 10px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  /*set the space from left to 30%*/
  margin-left: 30%;
}


/* set the button under the input element*/

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /*set the space from left to 30%*/
  margin-left: 30%;
}

.button-container {
  display: flex;
  justify-content: start;
  margin-left: 30%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>quiz</title>
  <link rel="stylesheet" href="quiz2.css">

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

</head>

<body>
  <div >
    <span id="question">What type of file do you need to open javascript file ?</span>
    <div >
      <input type="text" id="answer"  placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
    </div>
    <div >
      <button type="button" id="submit" >Submit</button>
    </div>
  </div>