When Using my Main.html and testing it, all images on my screen appear as they should.

When using my Server.py to local host it, all images stack and don’t overlap anymore.

I must be missing something??

My HTML:

    Rising Empire's Live Map
    
    


    
        <img src="images/navbar.png" alt="navbar">
    
    
        <img src="images/newone.png" alt="Map">
        <?xml version="1.0" encoding="UTF-8"?>
        
            


    </div>
</body>
<script src="scripts/map.js"></script>

My Server.Py:

class Serv(BaseHTTPRequestHandler):
    def do_GET(self):
        print(self.path)
        folder = self.path.split(r'/')
        print(folder[1])
        if self.path == '/':
            self.path = r'/main.html'
        try:
            if( folder[1] != 'images'):           
                print("Server Thinks this is not an image")
                file_to_open = open("Map/"+self.path[1:]).read()
                self.send_response(200)
                self.send_header("Content-Type", "text/html; charset=utf-8")
                self.end_headers()
                self.wfile.write(bytes(file_to_open, 'utf-8'))
            else:
                print("Server Thinks this IS an IMAGE")
                self.send_response(200)
                self.send_header("Content-Type", "image/png")
                self.end_headers()

                self.wfile.write(open("Map/"+self.path[1:],'rb').read())
        except:
            file_to_open = "File not found"
            self.send_response(404)

My Style.Css:

.container {
  position: relative;
}

 *{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
 }

 .container.image{
    left: 2000px;
    margin-top:300px;
    position: absolute;
 }

 .container.border{
    left: 2000px;
    margin-top:300px;
    position: absolute;
 }

 /* The navigation bar */
 .navbar {
    overflow: hidden;
    position: fixed; /* Set the navbar to fixed position */
    padding: 0;
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }

  .main {
    padding: 16px;
    margin-top: 30px;
    height: 1500px; /* Used in this example to enable scrolling */
  }
 svg path:hover {
    fill:rgb(255, 255, 255);opacity:1;
    cursor: pointer;
 }


 .img-overlay-wrap {
    display: inline-block; /* <= shrinks container to image size */
    transition: transform 150ms ease-in-out;
    top: 20px;
  }
  
  .img-overlay-wrap img { /* <= optional, for responsiveness */
     display: block;
     height: auto;
     top: 0;
     left: 0;
  }
  
  .img-overlay-wrap svg {
    position: absolute;
    top: 0;
    left: 0;
  }

  .center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
  }


.id1 {fill:rgb(177, 29, 29);}

Tested and i ensured that all cache was cleared so i can assure you the changes are live. Must be how the live hosts reads what i have done??

HTML Test
https://imgur.com/HZ1vK7L

Local Host via Py Test
https://imgur.com/X5Isxmp