Q:

Unexpected behaviour with jQuery animate and the div

I'll cut to the chase,
Basically, when the page loads, two hr lines from each side join together and meet in the middle. When that happens, a circle forms in the middle, then the lines go back to their original width.
Here's the problem: When the circle has fully expanded, it all of a sudden moves out of position (to the right) and the right line moves upwards.
I've been trying to use position: absolute to fix this, but that opens up a new can of worms.
Can someone please help me with this issue?
http://codepen.io/DocRow10/pen/JvrKb
Oh, yeah, and I have some random white space on the right. I don't know what that is occuring, but could someone kindly help me with that, too?
Thanks.
<div id="container">
        <div id="nav-bar">
            <div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a></div>
            <ul id="main-links">
                <a href="about.html"><li><span class="word-position">About</span></li></a>
                <a href="work.html"><li><span class="word-position">Work</span></li></a>
                <a class href="contact.php"><li><span class="word-position">Contact</span></li></a>
            </ul>
        </div>
        <div id="main-content">
            <div id="pic-container">
                <div id="relative">
                    <div id="photo-frame">
                        <div id="picture"></div>
                    </div>
                </div>
                <hr class="hidari" />

                <hr class="migi" />
            </div>

            <h1 id="page-header">About Me</h1>

                    </div>
                </div>

            </div>
        </div>
        <div class="clear"></div>
        <div id="footer">

            <p id="footer-text">
                &#169; 2016. All rights reserved.
            </p>
        </div>
    </div>

 body {
    margin: 0;
}

#nav-bar {
  width: 100%;
  height: 50px;
  background-color: rgb(40, 40, 40);
  border-bottom-style: solid;
  border-bottom-color: rgb(238, 0, 0);
  border-bottom-width: 7.5px;
  padding-top: 14px

}

#logo {
    position: relative;
    bottom: 5px;
    font-size: 30px;
    padding-left: 8px;
    float: left;
    font-family: bebas;
}

#word-1 {
    color: rgb(0, 154, 205);
}

#word-2 {
    color: rgb(255, 250, 250);
}

ul#main-links {
  list-style: none;
  margin: 0;
  padding-right: 50px;
  float: right;
  height: 100%;
  border-bottom: 7.5px solid transparent;
  display: block;
font-size: 0;
}

ul#main-links li {
  display: inline-block;
  text-align: center;
  border-bottom-style: solid;
  border-bottom-width: 7.5px;
border-bottom-color: rgb(238, 0, 0);
  color: white;
  font-family: arcon;
  font-size: 18px;
  height: 100%;
    width: 90px;
  position: relative;
  z-index: 2;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
    color: white;
}

a:active {
  text-decoration: none;
    color: white;
}

a#logo-link {
    text-decoration: none;

}

a#logo-link:visited {
  text-decoration: none;
    color: inherit;
}

a#logo-link:active {
  text-decoration: none;
    color: inherit;
}

ul#main-links > a > li > span.word-position {
  position: relative;
    top: 5px;
}

#main-content {
    background-color: rgb(131, 111, 255);
    width: 100%;

}

#background {

}

h1#page-header {
    margin: 0;
    font-family: code;
    font-size: 45px;
    text-align: center;
    padding: 20px 0px;
}

/* ABOUT */

#pic-container {
    width: 100%;
    height: 180px;
    text-align: center;
    padding-top: 10px;
}

#relative {
    position: relative;
    display: inline-block;
    right: 97.5px;
}

#photo-frame {
    background-color: royalblue;
    position: absolute;
    width: 0px;
    height: 0px;
    border-radius: 100px;
    border-style: solid;
    border-color: beige;
    border-width: 0px;
    top: 90px;
    left: 90px;
    z-index: 2;
}

#photo-frame > #picture {
    width: 100%;
    height: 100%;
    background-image: url('test.png');
    border-radius: 100px;
}

hr {
    position: relative;
    top: 97.5px;
    margin: 0;
    border-style: solid;
    border-color: black;
    overflow: hidden;
    height 2px;
    background-color: black;
}

.hidari {
    float: left;
}

.migi {
    float: right;
}

.clear {
    clear: both;
}

#intro {
    width: 70%;
    font-family: lato;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    font-size: 17px;
    line-height: 150%;
}

#expertise {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-bottom: 8px;
}

#expertise h1 {
    font-family: Arial;
    font-size: 25px;
}

#expertise h2 {
    font-family: sinkinsans;
    font-size: 18px;
    margin-top: 5px;
}

#expertise > #skills h2 {
    float: left;
}

#expertise h3 {
    font-family: sinkinsans;
    font-size: 14px;
    margin-top: -12.5px;
}

.company-header {
    font-family: sinkinsansbold;
}

#skills {
    width: 50%;
    overflow: auto;

}

.skill {
    display: inline-block;
    width: 100%;
}

/*-----SKILLS BAR-----*/

.bar {
    width: 300px;
    height: 35px;
    border: 2px solid black;
    border-radius: 10px;
    overflow: hidden;
    float: right;
}

.nil {
    background-image: url('footer_lodyas.png'); /* Background pattern from subtlepatterns.com */
    width: 100%;
    height: 100%;

    float: right;
    overflow: hidden;
}

.ability {
    width: 0%;
    height: 100%;
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, red , lime); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, red, lime); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, red, lime); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, red , lime); /* Standard syntax */
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 7.5px;
    border-top-left-radius: 7.5px; 
         /*  border-radius: 7.5px; */
}

/*--------------------*/
#experience {
    width: 50%;
}

.post {
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
}

#reference-point {
    width: 100%;
    height: 10%;
}

#how {
    display: inline-block;
    width: 100%;
}

#how > div {

    width: 42%;
    margin-left: auto;
    margin-right: auto;
}

#how h2 {
    font-family: sinkinsans;
    font-size: 18px;
}

#how > div > div {

}

#how p {
    font-family: lato;
    font-size: 15px;
    width: 55%;
    display: inline-block;
    position: relative;
    bottom: 4em;
}

#language-logos {
    height: 200px;
    width: 250px;
    display: inline-block;
    position: relative;
    left: 5%;
}
/*---------------------------------------------------------------*/

/* CONTACT */

#contact-info {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 80%;
}

#contact-info td {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

#contact-info td > p {
    text-align: justify;
    font-family: lato;
    width: 80%;

}

.spacer {
    padding: 10px 0px;
}

#message-div {
    height: 150px;
}

input[type="text"] {
    width: 100%;
    height: 27px;
    padding-left: 5px;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 15px;
}

input[type="text"]:hover, #recipient-message:hover {
    border-width: 1.5px;
    border-style: solid;
    border-color: rgb(152, 245, 255);
}

input[type="button"] {
    float: right;
    margin-top: 7.5px;
    background-color: rgb(72, 118, 215);
    border-color: rgb(72, 118, 215);
    border-radius: 5px;
    font-size: 15px;
    color: rgb(230, 230, 255);
    font-family: Tahoma;
}

label {
    font-family: lato;
    font-size: 18px;
}

#recipient-message {
    width: 100%;
    height: 100%;
    resize: none;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12.5px;
}

.form-confirmation {
    width: 80%;
    border-style: solid;
    border-width: 2.5px;
    border-radius: 5px;
    border-color: rgb(0, 0, 0);
}

.invalid-field {
    box-shadow: 0 0 23px red;
    -webkit-box-shadow: 0 0 23px red;
    -moz-box-shadow: 0 0 23px red;
}

#success {
    background-color: rgb(0, 210, 0);
    color: rgb(245, 255, 250);

}

#failure {
    background-color: rgb(255, 48, 48);
    color: rgb(137, 0, 0);
}

.form-confirmation > p {
   text-align: center;
    font-family: codee;
    font-size: 18px;
}

#footer {
    width: 100%;

    background-color: black;
}

#footer > p#footer-text {
    margin: 0;
    text-align: center;
    font-family: arial;
    color: rgb(169, 169, 169);
    padding: 20px;
    width: 100%;
}

@font-face {
  font-family: arcon;
  src: url(Arcon-Regular.otf);
}

@font-face {
  font-family: bebas;
  src: url(BEBAS___.ttf);
}

@font-face {
  font-family: bubblegum;
  src: url(BubblegumSans-Regular.otf);
}

@font-face {
  font-family: code;
  src: url(Days.otf);
}

@font-face {
  font-family: lato;
  src: url(Lato-Regular.ttf);
}

@font-face {
  font-family: codee;
  src: url(CODE_Bold.otf);
}

@font-face {
    font-family: sinkinsans;
    src: url(SinkinSans-400Regular.otf);
}

@font-face {
    font-family: sinkinsansbold;
    src: url(SinkinSans-500Medium.otf);
}

.clear {
    clear: both;
}

$("#main-links li").on('mouseenter', function() {

                $(this).animate({borderBottomColor: "rgb(0, 154, 205)"},"200");
            });

           $("#main-links li").on('mouseleave', function() {

                $(this).animate({borderBottomColor: "rgb(238, 0, 0)"},"200");
            });

            $("#picture").fadeOut();

            $("hr").delay(800).animate(
                {
                    width: "50%"
                }, 3200
            );

            $("#photo-frame").delay(4000).animate(
                {
                    width: "180px",
                    height: "180px",
                    top: "-=90px",
                    left: "-=90px",
                    borderLeftWidth: "7.5px",
                    borderTopWidth: "7.5px",
                    borderRightWidth: "7.5px",
                    borderBottomWidth: "7.5px"
                }, "slow", function() {
                   $("hr").animate(
                        {
                            width: "0%"
                        }, 2700
                     );
                    $("#picture").fadeIn(2000);
                });

            $.fn.widthPerc = function(){
                var parent = this.parent();
                return ~~((this.width()/parent.width())*100)+"%";
            }

            var percentageIndex = 0;
            var percentageValues = ["100%", "100%", "86%", "79%", "45%"];
            var $starterZone = $("#reference-point").position().top - $(window).height();
            var checked = false;

            $(window).on('scroll', function () {
                if ($(window).scrollTop() > $starterZone && (checked == false)) {

                    $(".ability").each(function() {
                        $(this).delay(1000).animate({
                            width: percentageValues[percentageIndex]
                        }, 3000, function() {
                           var progressWidth = $(this).widthPerc();
                            if (progressWidth == "100%") {
                                $(this).css({'border-top-right-radius': '7.5px', 'border-bottom-right-radius': '7.5px'});
                            }

                        });
                        percentageIndex++;
                        checked = true;
                    });
                }
            });

A:

box-sizing will fix both problems:
CSS
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Specifies that the elements should have padding and border included in the element's total width and height.

The issue was that Chrome has a default user agent stylesheet for hr elements which includes a 0.5em margin on both sides and 1px border-width. With these properties and the width: 50%; at the end of the animation the two elements become longer than 100% thus they break into two lines. In Firefox this wasn't the case, everything was fine.
The white-space issue on the right side was caused by the #footer-text paragraph. It has width: 100%; and padding: 20px; which makes it 40px wider from the viewport.
Please note that the * selector will apply the box-sizing to every element, which will break some of the current design. You can change it to #footer-text, hr so the rest of the page remains the same, but I recommend the usage of this useful property in the future as it will make your job a lot easier.

