Border Image Problem

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Rooftop Bar NYC</title>
        <style>
            /* Body */
                body{
                    background-image: url("https://i.pinimg.com/originals/a4/bf/58/a4bf58276d674626f52092e2194f79d8.jpg") ;
                    background-repeat: no-repeat;
                    background-size:cover;
                    background-attachment: fixed;
                    background-color: black;
                }
            /* Title */
                h1{
                    background-color: rgba(255, 255, 255, 0.5);
                    height: auto;
                    margin: 0% 1% 2% 1%;
                    padding: 0% 10% 0% 10%;
                    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                    font-size: 225%;
                    color: white;
                    text-align: center;
                    line-height: 150%;
                    text-shadow: 2px 2px rgb(253, 0, 232);
                }
            /* Left Body Items */
                #left{
                    float: left;
                    width: 67%;
                    margin-right: 2%;
                    margin-left: 1%;
                }
                /* Presentation Text */
                #intro_text{
                    background-color: rgba(255, 255, 255, 0.80); 
                    padding: 2%;
                    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                    color: black;
                    text-align: justify;
                    line-height: 130%;  
                }
                /* Skyline Photo */
                    #photo{
                        border-width: 3%;
                        border-style: solid;
                        border-color: rgb(253, 0, 232);
                    }
                /* Bar...