Certain css elements aren't scaling properly

I was wondering how I can correct some of these elements from moving into funny positions when the browser window is resized. I've managed to make the nav bar scale by using width: 100%; height: auto; However I'd like it so it scales neatly. Also I've learnt that using % rather than px seems to scale most things automatically. However with some elements on my site such as the team speak and server IP buttons at the top it is really hard to position them with %. As you can see from this animation of me resizing the window you can see what I mean about the nav bar and the buttons at the top. They scale but they move into funny positions, that's rather untidy. There are other elements that also move I'll provide the css for all the elements that move where they shouldn't below. Also if it helps this is my site so you can see where these elements belong.

Here is the css code for nav bar:

* {margin: 0px;
   padding: 0px;}

#nav_bar {background-color: #212121;
          height: 45px;
          text-align: center;
          position: relative;
          width: 100%;
          height: auto;}

#nav_bar ul {padding: 0px;}

#nav_bar > ul > li {display: inline-block;}

#nav_bar ul > li > a {color: white;
                      display: block;
                      text-decoration: none;
                      font-weight: normal;
                      padding-left: 25px;
                      padding-right: 25px;
                      line-height: 45px;
                      transition: all 0.5s ease;}

#nav_bar ul li ul {display: none;
                   list-style: none;
                   position: absolute;
                   background: white;
                   margin-left: 0px;
                   border-radius: 0px 0px 5px 5px;
                   box-shadow: 0px 1.5px 2px 0px;
                   border-left: 1px solid #BDBDBD;
                   border-right: 1px solid #BDBDBD;
                   border-bottom: 1px solid #BDBDBD;
                   color: #BDBDBD;
                   text-align: left;
                   z-index: 1;}

#nav_bar ul li a.active-page {background-color: #C62828;}

#nav_bar ul li:hover ul li a {line-height: 2em;}

#nav_bar ul li a:hover {background: #C62828;
                        transition: all 0.5s ease;}

#nav_bar ul li:hover ul {display: block;}

#nav_bar ul li ul li a {color: #000000;
                        display: block;}

#nav_bar ul li ul li a:hover {background: #1565C0;
                              color: white;
                              transition: all 0.5s ease;}

Here is the css code for the top buttons:

#logo {position: relative;
       top: -70px;
       text-align: center;}

#ip_box {width: 210px;
         height: 43px;
         background: #212121;                 
         color: white;
         font-size: 15px;
         top: 0;
         left: 150px;
         position: absolute;}

#ip_text {bottom: 85px;
          top: 4px;
          left: 138px;        
          color: white;
          position: absolute;}

#teamspeak_box {display: block;
                width: 159px;
                height: 43px;
                background: #212121;
                position: absolute;
                top: 0;
                right: 154px;
                transition: all 0.5s ease;}

#teamspeak_box:hover {/*border-bottom: 4px solid #C62828;*/
                      background: #313131;
                      transition: all 0.5s ease;}

#teamspeak_box a {display: block;
                  height: 43px;}

#teamspeak_box_2 {display: block;
                  width: 43px;
                  height: 43px;
                  background:#313131;
                  position: absolute;
                  left: 0;
                  top: 0;}

#teamspeak_image {display: block;
                  position: absolute;
                  top: 5px;
                  left: 5px;}

#teamspeak_text {display: block;
                 color: white;
                 position: absolute;
                 top: 14px;
                 right: 10px;
                 font-family: 'Roboto', sans-serif;}

And lastly the css for the social media buttons at the bottom:

#social_media_youtube {float: left;
                       position: relative;
                       bottom: 12px;
                       left: 675px;}

#social_media_twitch  {float: left;
                       position: relative;
                       bottom: 10px;
                       left: 575px;}

#social_media_twitter {float: right;
                       position: relative;
                       bottom: 20px;
                       right: 675px;}

#social_media_facebook {float: right;
                        position: relative;
                        bottom: 13px;
                        right: 575px;}

via Chebli Mohamed