Html 无法按我想要的方式定位img元素

我无法按我想要的方式定位这个img元素（oct2.jpg，在.html文件的最末尾附近）。所有其他img元件工作正常。我觉得元素不知何故阻碍了oct2.jpg的正常运行，但我不明白（请参阅附图）

CSS:
/*字体*/
@字体{
字体系列：agencybold；
src:url（../AgencyFB Bold.ttf）；}
/*标题*/
标题{
边框：1px实心rgb（173,39,39）；
边缘顶部：10px；
边缘底部：10px；
边界半径：10px；
填充：0px；
背景图像：线性渐变（向左，黑色45%，#b02b2c）；
溢出：隐藏；}
/*导航栏*/
导航{
宽度：100%；
溢出：隐藏；
位置：粘性；
顶部：0px；
位置：-webkit sticky；}
导航ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；}
李海军{
浮动：左；
右边框：1px实心#bbb；
边框右上角半径：0px；
边界半径：10px；
宽度：19.8%；
转换：0.5s；}
李娜{
显示：块；
颜色：白色；
文本对齐：居中；
填充：10px 50px；
边际：0px；
文字装饰：无；
字体大小：20px；
线高：25px；
边界半径：4px；
显示：块；
文本对齐：居中；
溢出：隐藏；}
李导航：悬停{
背景色：#953036；}
/*背景*/
.家庭背景{
背景图片：url（“../Images/background/background1.jpg”）；
背景位置：中心；
背景重复：重复；
背景尺寸：封面；
背景大小：100%；}
@媒体屏幕和屏幕（最大宽度：1000px）{
.家庭背景{
背景图像：url（“../Images/background/background.jpg”）；
背景位置：中心；
背景重复：重复；
背景尺寸：封面；
身高：100%；
}
p{
字体大小：12px；
} }
.传奇背景{
背景色：黑色；}
身体{
边距：0px；}
/*用于定位图像*/
.中心{
显示：块；
左边距：自动；
右边距：自动；}
.center1{
显示：块；
左边距：自动；
右边距：自动；
边缘顶端：40px；
边缘底部：40px；
边界半径：10px；}
.center2{
左边距：80px；
右边距：80px；
边缘顶部：50px；
边缘底部：50px；
浮动：左；
边界半径：10px；}
.对{
左边距：60像素；
边缘顶部：100px；
页边距底部：100px；}
.左{
左边距：100px；}
/*辛烷值*/
辛烷值{
利润率最高：20%；
边缘底部：0px；
左缘：70%；
右边距：0；
不透明度：0.7；}
.格林：悬停{
背景图片：url（../Images/Legends\u pics/octanechibihover.png）；
不透明度：1；
过渡期：1.0s；
背景尺寸：200px；
背景位置：中心；
背景重复：无重复；
过滤器：亮度（120%）；}
.img1{
边缘顶部：20px；
左边距：30px；
边界半径：25px；}
.img2{
边缘顶部：20px；
浮动：对；
右边距：80px；
边界半径：25px；
内容：“；
清楚:对,；
显示：表格；
溢出：隐藏；}
.黑体{
背景图像：线性渐变（向左，黑色45%，#b02b2c）；}
.天才职位{
浮动：对；
边缘顶部：80px；
右边距：80px；
边界半径：25px；}
.集装箱{
填充：10px；
利润率：40像素；
高度：2000px；
背景色：黑色；
边框：3倍实心；
边界图像源：线性梯度（360度，rgb（0,0,0），#b02b2c）；
边界图像切片：1；
边界半径：10px；}
.集装箱1{
字体系列：agencybold；
字体大小：50px；
颜色：白烟；
文本对齐：居中；}
.集装箱2{
字体系列：agencybold；
字体大小：30px；
颜色：白烟；
文本对齐：居中；}
.集装箱1{
字体系列：agencybold；
边框：1px实心#953036；
填充：15px；
边界半径：8px；
背景色：rgb（17,16,16）；
宽度：900px；
左边距：14px；
字体大小：20px；
颜色：白烟；
文本对齐：居中；}
.集装箱2{
字体系列：agencybold；
边框：1px实心#953036；
浮动：对；
右边距：50px；
填充：15px；
边界半径：8px；
背景色：rgb（17,16,16）；
宽度：400px；
字体大小：20px；
颜色：白烟；
文本对齐：居中；
溢出：隐藏；
清除：左；
显示：block；}
/*用于将属性指定给div*/
.边界{
边缘顶端：40px；
边框：4px实心#953036；
背景色：#953036；}
.边界1{
边缘顶端：40px；
边框顶部：4px实心#ffffff；
边框底部：4px实心#ffffff；
背景色：#953036；}
.btn{
背景色：#953036；
边界：无；
颜色：rgb（0,0,0）；
填充：16px 32px；
文本对齐：居中；
字体大小：16px；
利润：4倍2倍；
不透明度：0.1；
过渡：0.5s；
溢出：隐藏；
显示：块；
清除：两个；}
.btn1{
背景色：#953036；
边界：无；
颜色：rgb（0,0,0）；
不透明度：0.3；
过渡：0.3s；
溢出：隐藏；
清除：两个；}
.btn:悬停{
不透明度：1；
溢出：隐藏；
显示：块；
清除：两个；}
.btn1：悬停{
不透明度：1；
溢出：隐藏；
滤光片：亮度（101%）；
清除：两个；}
/*段落容器*/
P.容器{
颜色：rgb（255、255、255）；
利润率：30像素；
填充：20px；
边框：2个实心#ffffff；
背景色：#953036；
字体系列：agencybold；
字体大小：42px；
边界半径：10px；
溢出：隐藏；
文本对齐：居中；}
辛烷值







辛烷值
辛烷是一个高速进攻的传奇，正如
CSS:

 /* Font */

@font-face {
    font-family: agencybold;
    src: url(../AgencyFB-Bold.ttf); }

/* Header */

header {
    border: 1px solid rgb(173, 39, 39);
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 0px;
    background-image: linear-gradient( to left, black 45%, #b02b2c);
    overflow: hidden; }

/* Navigation Bar */

nav {
    width: 100%;
    overflow: hidden;
    position: sticky;
    top: 0px;
    position: -webkit-sticky; }

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333; }

nav li {
    float: left;
    border-right: 1px solid #bbb;
    border-top-right-radius: 0px;
    border-radius: 10px;
    width: 19.8%;
    transition: 0.5s; }

nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 50px;
    margin: 0px;
    text-decoration: none;
    font-size: 20px;
    line-height: 25px;
    border-radius: 4px;
    display: block;
    text-align: center;
    overflow: hidden; }

nav li:hover {
    background-color: #953036; }

/* Background */

.homebackground {
    background-image: url("../Images/background/background1.jpg");
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    background-size: 100%; }

@media screen and (max-width: 1000px) {
    .homebackground {
        background-image: url("../Images/background/background.jpg");
        background-position: center;
        background-repeat: repeat;
        background-size: cover;
        height: 100%;
    }
    p {
        font-size: 12px;
    } }

.legendsbackground {
    background-color: black; }

body {
    margin: 0px; }

/* For positioning images */

.center {
    display: block;
    margin-left: auto;
    margin-right: auto; }

.center1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: 10px; }

.center2 {
    margin-left: 80px;
    margin-right: 80px;
    margin-top: 50px;
    margin-bottom: 50px;
    float: left;
    border-radius: 10px; }

.right {
    margin-left: 60px;
    margin-top: 100px;
    margin-bottom: 100px; }

.left {
    margin-left: 100px; }

/* Octane */

.octane {
    margin-top: 20%;
    margin-bottom: 0px;
    margin-left: 70%;
    margin-right: 0;
    opacity: 0.7; }

.green :hover {
    background-image: url(../Images/Legends_pics/octanechibihover.png);
    opacity: 1;
    transition: 1.0s;
    background-size: 200px;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(120%); }

.img1 {
    margin-top: 20px;
    margin-left: 30px;
    border-radius: 25px; }




.img2 {
    margin-top: 20px;
    float: right;
    margin-right: 80px;
    
    
    border-radius: 25px;
    content: "";
    clear: right;
    display: table;
    overflow: hidden; }

.blackbody {
    background-image: linear-gradient( to left, black 45%, #b02b2c); }

.gifposition {
    float: right;
    margin-top: 80px;
    margin-right: 80px;
    border-radius: 25px; }

.container {
    padding: 10px;
    margin: 40px;
    height: 2000px;
    background-color: black;
    border: 3px solid;
    border-image-source: linear-gradient(360deg, rgb(0, 0, 0), #b02b2c);
    border-image-slice: 1;
    border-radius: 10px; }

.containerh1 {
    font-family: agencybold;
    font-size: 50px;
    color: whitesmoke;
    text-align: center; }

.containerh2 {
    font-family: agencybold;
    font-size: 30px;
    color: whitesmoke;
    text-align: center; }

.containerp1 {
    font-family: agencybold;
    border: 1px solid #953036;
    padding: 15px;
    border-radius: 8px;
    background-color: rgb(17, 16, 16);
    width: 900px;
    margin-left: 14px;
    font-size: 20px;
    color: whitesmoke;
    text-align: center; }

.containerp2 {
    font-family: agencybold;
    border: 1px solid #953036;
    float: right;
    margin-right: 50px;
    padding: 15px;
    border-radius: 8px;
    background-color: rgb(17, 16, 16);
    width: 400px;
    font-size: 20px;
    color: whitesmoke;
    text-align: center;
    overflow: hidden;
    clear: left;
    display: block; }

/* For assigning properties to divs */

.border {
    margin-top: 40px;
    border: 4px solid #953036;
    background-color: #953036; }

.border1 {
    margin-top: 40px;
    border-top: 4px solid #ffffff;
    border-bottom: 4px solid #ffffff;
    background-color: #953036; }

.btn {
    background-color: #953036;
    border: none;
    color: rgb(0, 0, 0);
    padding: 16px 32px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    opacity: 0.1;
    transition: 0.5s;
    overflow: hidden;
    display: block;
    clear: both; }

.btn1 {
    background-color: #953036;
    border: none;
    color: rgb(0, 0, 0);
    opacity: 0.3;
    transition: 0.3s;
    overflow: hidden;
    clear: both; }

.btn:hover {
    opacity: 1;
    overflow: hidden;
    display: block;
    clear: both; }

.btn1:hover {
    opacity: 1;
    overflow: hidden;
    filter: brightness(101%);
    clear: both; }

/* Paragraph Containers */

.pcontainer {
    color: rgb(255, 255, 255);
    margin: 30px;
    padding: 20px;
    border: 2px solid #ffffff;
    background-color: #953036;
    font-family: agencybold;
    font-size: 42px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center; }

<!DOCTYPE html>
<html>

<head>
    <title>
        Octane
    </title>

    <link rel="stylesheet" type="text/css" href="/CSS/cssfile.css">
</head>

<body class="blackbody">


    <header>
        <img src="../Images/Logo/apexlogo.png" height=150px; class="center">
    </header>


    <nav>
        <ul>
            <li><a class="active" href="../Home/index.html">Home</a></li>
            <li><a href="../Legends/legends.html">Legends</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Submissions</a></li>
        </ul>
    </nav>


    <div class="container">

        <a href="#" title="Run Fast, Hit Fast, Win Fast" onclick="return false;"><img src="../Images/Octane/octaneloop.gif" height="500px" class="gifposition"> </a>



        <h1 class="containerh1"> Octane </h1>

        <p class="containerp1"> Octane is a high-speed Offensive Legend, as his name implies. His Stim is great for
            closing in on
            opponents and covering large distances. His passive Swift Mend and ultimate
            Launch Pad complements it by providing self-healing and a jump pad to cover more and vertical distances.</p>


        <h2 class="containerh2">
            Biography
        </h2>

        <a href="#" title="The stories got it wrong. Hare crushes tortoise, every time." onclick="return false;"><img src="../Images/Octane/oct1.png" width="430px" class="img1"></a>

        <p class="containerp2">One day, Octavio Silva was bored. In fact, he was bored most days. Heir to the
            preoccupied CEOs of Silva Pharmaceuticals and wanting for nothing in life, he entertained himself by
            performing death-defying stunts and posting holovids of them for his fans to gawk over. So, this day, he
            decided to set the course record for a nearby Gauntlet by launching himself across the finish line – using a
            grenade. He later recounted that day as the single greatest day in his life.

            As he lay in triage hours later, the doctors informed him that the damage done to his legs meant his
            daredevil days were over. That didn’t sit well with Octavio, who turned to an old friend for help: Ajay Che,
            who he guilted into forging an order to replace his legs with bionic ones. Suddenly able to repair his limbs
            at a moment’s notice, Octavio decided petty online stunts weren’t enough: the ultimate adrenaline rush, the
            Apex Games, was calling. Now, he's going to become an Apex Champion doing the most incredible, death-defying
            moves anyone's ever seen. Maybe in the arena, he won’t be so bored. </p>

            <a href="#" title="You think I'm afraid of you? I blew off my own legs!" onclick="return false;"><img src="../Images/Octane/oct3.jpg" width="430px" class="img1"></a>

            <a href="#" title="You think I'm afraid of you? I blew off my own legs!" onclick="return false;"><img src="../Images/Octane/oct2.jpg" width="170px" class="img2"></a>


    </div>



</body>

</html>