Как мне выровнять все элементы рядом друг с другом?

Question

Когда я делал небольшой веб-сайт для развлечения, возможно, чтобы узнать кое-что о html, css и js, я застрял на небольшом участке. Есть 3 части вещи, которые я хочу иметь в виде прямой линии, но они спускаются вниз, как ступеньки на лестнице. Извините, если кодирование и прочее грязное, я новичок в кодировании. HTML:

CSS (не знаю, нужно ли это, я просто помещаю это сюда на всякий случай):

    text-decoration: none;
    color: black;
}

.title {
    color: yellow;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.outline {
    text-shadow: -2px -2px 0 rgb(255, 255, 255), 2px -2px 0 rgb(255, 255, 255), -2px 2px 0 rgb(255, 255, 255), 2px 2px 0 rgb(255, 255, 255);
}

.inandout {
    transition: transform 0.25s;
}

.inandout:hover {
    transform: scale(0.9);
}

.mainSection {
    background-color: rgba(255, 255, 255, 50%);
}

.img {
    background-color: white;
}
.outline1 {
    text-shadow: -0.5px -0.5px 0 rgb(255, 255, 255), 0.5px -0.5px 0 rgb(255, 255, 255), -0.5px 0.5px 0 rgb(255, 255, 255), 0.5px 0.5px 0 rgb(255, 255, 255);
}

Answer 1

Кажется, ваша таблица выровнена по правому краю, а не по центру.

Попробуйте следующее:

<table align="center">
    <td align="center">
        <h1 align="center"><h1 align="center">Choose how many bananas you want!</h1></h1>
        <div align="center">
        <select id="amount" style="font-size: 15px;">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
</div>
<div align="center">

Я воткнул сюда то, что у вас было, и, кажется, все по центру.

https://jsfiddle.net/sbz7fxdg/1/

Answer 2

Кажется, вы используете таблицы и таблицы внутри таблиц. Я бы посмотрел на использование и системы сеток. Но простое решение того, чего, я думаю, вы пытаетесь достичь, - это заменить вашу последнюю таблицу (с «Сколько бананов вы хотите купить») следующим:

  <div style="text-align:center;">
  <span class="formquestion">Choose how many bananas you want!</></span>
  <select id="amount" style="font-size: 15px;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <button>Buy</button>
  </div>

Рабочий пример: https://codepen.io/fraggley/pen/LYpdvJg