Hi,

I know my title seems pretty easy to answer, none the less, the page that I'm working on seems to defy all odds. I have a very simple web page that contains different sections. The section in particular is a "BIO" section. I'm using Bootstrap and the main <DIV> has a single class of "row". When I view the page in multiple browsers from my laptop, it renders perfectly every time. However, on the clients computer, it's not even close. The settings on my clients computer is identical to mine as far as screen resolutions and font-size. Any idea what I might be missing. I know this is a long-shot with just this little bit of info. I have included the "BIO" section as well as all CSS Rules for it below. Obviously, the wording has been changed to Lorum Ipsum.

Code:
#div-biography {
    width: 80%;
    color: #444;
    height: 100vh;
    text-align: center;
    margin-top: 200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    border: 1px solid transparent;
    letter-spacing: 0.04em;
    font-family: 'Arial Narrow', 'Roboto Condensed';
}

#div-biography img {
    float: left; 
    width: auto; 
    height: 270px; 
    margin-top: 50px; 
    margin-bottom: 0; 
    margin-left: 40px; 
    margin-right: 40px; 
    border-radius: 50%;
}

#div-biography p {
    width: 80%;
    height: 30%;
    font-size: 20px;
    text-align: justify;
    margin-top: 200px;
    margin-right: auto;
    margin-bottom: 160px;
    margin-left: auto;
    width: 90%; 
    line-height: 1.4em;
    padding-right: 20px;
}

#div-biography #bar1 {
    width: 100%;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -140px;
    background-color: #fab649;
}

#bar2 {
    width: 100%;
    margin-top: -120px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fab649;
    border: 1px solid red;
}

table {
    margin: auto auto;
}

.text {
    text-align: justify;
    width: 80%;
    height: 30%;
    font-size: 20px;
    text-align: justify;
    margin: 40px auto;
    padding-top: 40px;
    width: 90%;
    line-height: 1.4em;
    padding-right: 20px;
}

.textalign {
    margin-top: 0;
}
Code:
            <div id="div-biography" class="row">
                <table border="0" style="width: 89%">
                    <tr>
                        <td colspan="2" style="font-size: 30px">BIOGRAPHY</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <hr id="bar1">
                        </td>
                    </tr>
                    <tr>
                        <td><img src="images/davidbranson.JPG"></td>
                        <td><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <br><br><br><br><br><br>
                            <hr id="bar2">
                        </td>
                    </tr>
                </table>
            </div>