如何将所有项目彼此对齐?

当我制作一个有趣的小型网站来学习有关html,css和js的一些知识时,我陷入了一点麻烦。我想将某物分为3个部分,但它们像楼梯上的台阶一样下降。抱歉,如果编码和内容混乱,我是编码新手。 HTML:

<html>
<head>
    <link rel="stylesheet" href="main.css">
    <script src="js/banana.js"></script>
</head>
<body class="outline">
    <div align="middle"><a href="/index.html"><table><td><img src="media/banana left.png" alt="" width="100px"></td><td><h1 class="title">Stupid Banana Shop</h1></td><td><img src="media/banana right.png" alt="" width="100px"></td></table></a></div> 
    <h1 style="font-size: 75px;" align="middle" class="outline">Banana</h1>
    <section class="mainSection">
    <table>
    <tr><td><table>
    <tr><td class="inandout"><a onclick="function1();"><img src="media/banana/1.png" alt="" align="left" width="75px"></a></td></tr>
    <tr><td class="inandout"><a onclick="function2();"><img src="media/banana/2.png" alt="" align="left" width="75px"></a></td></tr>
    <tr><td class="inandout"><a onclick="function3();"><img src="media/banana/3.png" alt="" align="left" width="75px"></a></td></tr>
    <tr><td class="inandout"><a onclick="function4();"><img src="media/banana/4.png" alt="" align="left" width="75px"></a></td></tr>
    </table>
</td>
    <td><img src="media/banana/1.png" alt="" width="312px" align="left" id="mainImage"></td>
</tr>
<tr>
<table align="center">
    <td>
        <h1><h1 align="middle">This is a banana. What more is there to say?<br> It's the base of everything on earth.<br><del style="font-size: 50%;" class="outline1">atleast for everything around bananas</del></h1></h1>
    </td>
</table></tr>
<tr>
<table align="right">
    <td align="right">
        <h1 align="right"><h1 align="middle">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">
<button>Buy</button>
</div>
</table>
</td>
    </tr>
</table>
    </section>
</body>
</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);
}