Why isn't my line divider and buttons on small screen mobile devices in proportion?

Question

I was wondering why my buttons in the jsfiddle below and my line divider shown below in my jsfiddle isn't in line like my text on a mobile device such as the iPhone. For example, the outline of the buttons go each over each other and the line goes to the right side more and isn't equal on the users screen. How can I stop this from happening and ensure each part of the content on my web page is responsive/in proportion to what screen the user is viewing my site on.

Website code

Here is an example screenshot below of what I'm talking about.

As you can see in the code below, I have used bootstraps col could I have picked the wrong size of the container could this be the issue?

   <div class="header1">
              <div class="container">
                  <div class="row">
                      <div class="col-lg-12">
                          <div class="header-content">
                              <h1 class="maintxt rotateInUpLeft animated">LIAM DOCHERTY</h1>
                              <h3 class="subtxt rotateInUpLeft animated">WEB DEVELOPER &amp; GRAPHIC DESIGNER</h3>
                              <hr class="content-divider">
                              <ul class="list-inline intro-social-buttons">
                                <li>
                                    <a href="#" class="btn btn-primary btn-lg outline rotateInUpLeft animated"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Web Development Portfolio</span></a>
                                </li>
                                  <li>
                                      <a href="#" class="btn btn-primary btn-lg outline rotateInUpLeft animated"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">GFX Design Portfolio</span></a>
                                  </li>
                                  <li>
                                      <a href="#" class="btn btn-primary btn-lg outline rotateInUpLeft animated"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">About Me</span></a>
                                  </li>
                                  <li>
                                      <a href="#" class="btn btn-primary btn-lg outline rotateInUpLeft animated"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Contact Me</span></a>
                                  </li>
                              </ul>
                          </div>
                      </div>
                  </div>

              </div>
            </div>

Answer 1

You set a fixed width for hr class in CSS

.content-divider {
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    width: 790px;
}

This breaks the line divider on small screens.

For the buttons add a padding

ul.intro-social-buttons li {
  padding-bottom: 10px;
}

https://jsfiddle.net/jktsmruc/3/