How to fix the element's margin which comes after fixed element

Question

Im trying to build a portifolio. For the image div i have mentioned the width as 25% and position:fixed and the following content div has margin-left:25% but not sure why margin is lot between the two div's

PS:Space is more visible on the codepen link

check the following snippet and codepen reference portifolio

Few questions here

1. When element is position:fixed why the following element has to be given margin-left,if not given it would overlap on the fixed element

Please help

body {
  font-family: 'Lato';
  font-size: 14px;
  background: #f0f0f0;
  color: #333333;
}
.container {
  display: flex;
  padding-top: 10px;
}
.details {
  padding-top: 10px;
  padding-left: 10px;
  height: 100%;
  margin-left: 25%;
  width: 80%;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.125);
}
.description {
  width: 100%;
  margin-left: 10px;
}
.description .content {
  border-top: 1px solid #e6e6e6;
  padding-top: 10px;
  margin-top: 10px;
}
.description .content ul {
  list-style-type: none;
}
.description .content ul li {
  display: inline-block;
}
.snapshot {
  width: 25%;
  text-align: center;
  padding-top: 20px;
  margin-left: 10px;
  position: fixed;
  left: 0;
  box-sizing: border-box;
  background: white;
}
.snapshot img {
  width: 100%;
}
.snapshot .separator {
  margin: 0;
}
.card-block {
  padding: 0;
  font-size: 12px;
}
.card-block address {
  margin: 0;
}
.card-block section {
  display: flex;
  padding: 10px;
}
.card-block section span {
  vertical-align: middle;
}
.card-block section .info {
  color: #707070;
}
.card-block section .content {
  padding-left: 10px;
}
.social-profiles a {
  text-decoration: none;
  outline: none;
  margin-left: 10px;
}
.social-profiles a img {
  outline: none;
}
.social-profiles a:hover {
  text-decoration: none;
}

<div class="container">
  <div class="row">
    <div class="fixed">
      <div class="card col-md-3 snapshot">
        <img class="card-img-top" src="http://www.ssbuicetalumni.com/wp-content/themes/sschem/demos/dummy_team.jpg">
        <h4>
                    abc-xyz
                </h4>
        <small>
                    Software Engineer-Front End
                </small>
        <hr/>
        <div class="card-block">

          <address>
                        <section class="home-address">
                            <span class="info"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
                            <span class="content">
      abc def ghi,<br/>abc-13452</span>
                        </section>

                        <section class="contact">
                            <span class="info"> <i class="fa fa-phone" aria-hidden="true"></i></span>
                            <span class="content">125-535-1999</span>

                        </section>
                        <section>
                            <span class="info"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
                            <span class="content">abc.86@gmail.com</span>
                        </section>

                    </address>

        </div>
        <hr class="separator" />
        <div class="social-profiles">
          <a href="i" target="_blank">
            <i class="fa fa-twitter " aria-hidden="true"></i>
          </a>
          <a href="" target="_blank">
            <i class="fa fa-facebook" aria-hidden="true"></i>
          </a>

          <a href="http://stackoverflow.com/users/6814719/geeky">
            <i class="fa fa-stack-overflow" aria-hidden="true"></i>
          </a>
          <a target="_blank" href="">
            <i class="fa fa-github" aria-hidden="true"></i>
          </a>
        </div>
      </div>
    </div>

    <div class="details">
      <h5>BACKGROUND</h5>
      <hr/>
      <section class="about resume-content" id="about">
        <header>
          <i class="fa fa-id-card header-image" aria-hidden="true"></i>

        </header>

        <div class="description">
          <div class="header-info">ABOUT</div>
          <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor sapien facilisis, auctor mauris id, iaculis ex. Integer metus nulla, lacinia non dignissim eget, elementum et leo. Quisque aliquet erat eget scelerisque lacinia. Integer hendrerit
            lacus risus, id feugiat augue gravida at. Etiam accumsan vulputate justo sit amet suscipit. Donec interdum metus eget nulla rutrum vehicula. Duis imperdiet lorem orci, ac scelerisque augue facilisis nec. Etiam faucibus id sem a congue. Praesent
            purus tortor, ullamcorper et eros sed, tristique ornare est. Aenean suscipit lectus eu sem congue, vel ultricies turpis suscipit. Donec pretium urna lorem, et eleifend neque tempor eu. Phasellus rhoncus, turpis tempus posuere tempor, libero
            tortor vehicula libero, eget gravida erat quam eu ex. Curabitur egestas massa sed consequat laoreet. Aliquam ultricies imperdiet eleifend. Duis in erat ac risus sagittis consequat in auctor nisl. Ut et felis in purus vulputate vulputate at
            eget arcu. Integer dignissim dolor eros, a iaculis lorem volutpat quis. Etiam diam sem, blandit vel varius at, pulvinar a nibh. Maecenas interdum condimentum diam eu maximus. Morbi egestas, nisi eu pellentesque luctus, enim magna aliquet urna,
            et vehicula diam quam ut nisi. Phasellus justo felis, varius eget ornare a, placerat et nisi. Aenean non ligula a diam pharetra sollicitudin. Fusce sed erat vitae ante vestibulum pulvinar ac eu purus. In hendrerit id diam a vehicula. Phasellus
            a ex aliquam, dignissim tortor eget, placerat felis. Mauris sed mi nec magna pulvinar rutrum sed in risus. Mauris quis vulputate lacus. Cras ornare id ex sed dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin libero
            libero, porttitor et ultrices vel, sagittis eu nisl. Aliquam iaculis auctor neque quis porta. Integer tristique, metus eu pulvinar pulvinar, est ante vehicula risus, in sagittis metus lectus non purus. In laoreet dapibus eros, vel suscipit
            ante suscipit ac. Quisque ultrices quis sem ut elementum. Suspendisse ullamcorper ac purus a maximus. Donec sollicitudin odio a pellentesque tempus. Nam sed nibh eu turpis ullamcorper tristique eu sit amet mi. Nam eu consectetur lectus, id
            auctor arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse vitae volutpat leo, elementum vulputate nisl. Vestibulum urna sapien, dictum nec tempus a, vehicula quis orci. Phasellus imperdiet
            quam quis vestibulum posuere. Proin posuere, lectus at finibus rhoncus, turpis quam hendrerit ipsum, quis egestas mauris tortor a nibh. Nulla condimentum massa commodo libero tempor, non ornare libero porta. Nulla eget scelerisque tortor,
            in malesuada tortor. Suspendisse pharetra risus a tellus fermentum lacinia. Pellentesque in vehicula magna. Proin risus ipsum, condimentum et tortor vel, ultricies tristique tortor. Ut fringilla, nibh sed hendrerit tempor, arcu quam vulputate
            sem, non rutrum dui augue accumsan felis. Nunc ut cursus odio. Morbi vitae eros maximus, convallis elit ut, elementum metus. Aenean posuere non urna ac elementum. In hac habitasse platea dictumst. Integer dictum eu ipsum sit amet mollis. Generated
            5 para

          </div>

Answer 1

Try this..! it's working.

body {
  font-family: 'Lato';
  font-size: 14px;
  background: #f0f0f0;
  color: #333333;
}
.container {
  display: flex;
  padding-top: 10px;
  word-wrap: break-word;
}
.details {
  padding: 1%;
  height: auto;
  width: 72%;
  position:absolute;
  right:0;
  top:0;
  background: white;
  border: 1px solid rgba(0, 0, 0, .125);
}
.description {
  width: 100%;
}
.description .content {
  border-top: 1px solid #e6e6e6;
  padding-top: 10px;
  margin-top: 10px;
}
.description .content ul {
  list-style-type: none;
}
.description .content ul li {
  display: inline-block;
}
.snapshot {
  width: 24%;
  text-align: center;
  padding:1%;
  position: fixed;
  left: 0;
  top:0;
  box-sizing: border-box;
  background: white;
}
.snapshot img {
  width: 100%;
}
.snapshot .separator {
  margin: 0;
}
.card-block {
  padding: 0;
  font-size: 12px;
}
.card-block address {
  margin: 0;
}
.card-block section {
  display: flex;
  padding: 10px;
}
.card-block section span {
  vertical-align: middle;
}
.card-block section .info {
  color: #707070;
}
.card-block section .content {
  padding-left: 10px;
}
.social-profiles a {
  text-decoration: none;
  outline: none;
  margin-left: 10px;
}
.social-profiles a img {
  outline: none;
}
.social-profiles a:hover {
  text-decoration: none;
}

<div class="container">
  <div class="row">
    <div class="fixed">
      <div class="card col-md-3 snapshot">
        <img class="card-img-top" src="http://www.ssbuicetalumni.com/wp-content/themes/sschem/demos/dummy_team.jpg">
        <h4>
                    abc-xyz
                </h4>
        <small>
                    Software Engineer-Front End
                </small>
        <hr/>
        <div class="card-block">

          <address>
                        <section class="home-address">
                            <span class="info"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
                            <span class="content">
      abc def ghi,<br/>abc-13452</span>
                        </section>

                        <section class="contact">
                            <span class="info"> <i class="fa fa-phone" aria-hidden="true"></i></span>
                            <span class="content">125-535-1999</span>

                        </section>
                        <section>
                            <span class="info"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
                            <span class="content">abc.86@gmail.com</span>
                        </section>

                    </address>

        </div>
        <hr class="separator" />
        <div class="social-profiles">
          <a href="i" target="_blank">
            <i class="fa fa-twitter " aria-hidden="true"></i>
          </a>
          <a href="" target="_blank">
            <i class="fa fa-facebook" aria-hidden="true"></i>
          </a>

          <a href="http://stackoverflow.com/users/6814719/geeky">
            <i class="fa fa-stack-overflow" aria-hidden="true"></i>
          </a>
          <a target="_blank" href="">
            <i class="fa fa-github" aria-hidden="true"></i>
          </a>
        </div>
      </div>
    </div>

    <div class="details">
      <h5>BACKGROUND</h5>
      <hr/>
      <section class="about resume-content" id="about">
        <header>
          <i class="fa fa-id-card header-image" aria-hidden="true"></i>

        </header>

        <div class="description">
          <div class="header-info">ABOUT</div>
          <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor sapien facilisis, auctor mauris id, iaculis ex. Integer metus nulla, lacinia non dignissim eget, elementum et leo. Quisque aliquet erat eget scelerisque lacinia. Integer hendrerit
            lacus risus, id feugiat augue gravida at. Etiam accumsan vulputate justo sit amet suscipit. Donec interdum metus eget nulla rutrum vehicula. Duis imperdiet lorem orci, ac scelerisque augue facilisis nec. Etiam faucibus id sem a congue. Praesent
            purus tortor, ullamcorper et eros sed, tristique ornare est. Aenean suscipit lectus eu sem congue, vel ultricies turpis suscipit. Donec pretium urna lorem, et eleifend neque tempor eu. Phasellus rhoncus, turpis tempus posuere tempor, libero
            tortor vehicula libero, eget gravida erat quam eu ex. Curabitur egestas massa sed consequat laoreet. Aliquam ultricies imperdiet eleifend. Duis in erat ac risus sagittis consequat in auctor nisl. Ut et felis in purus vulputate vulputate at
            eget arcu. Integer dignissim dolor eros, a iaculis lorem volutpat quis. Etiam diam sem, blandit vel varius at, pulvinar a nibh. Maecenas interdum condimentum diam eu maximus. Morbi egestas, nisi eu pellentesque luctus, enim magna aliquet urna,
            et vehicula diam quam ut nisi. Phasellus justo felis, varius eget ornare a, placerat et nisi. Aenean non ligula a diam pharetra sollicitudin. Fusce sed erat vitae ante vestibulum pulvinar ac eu purus. In hendrerit id diam a vehicula. Phasellus
            a ex aliquam, dignissim tortor eget, placerat felis. Mauris sed mi nec magna pulvinar rutrum sed in risus. Mauris quis vulputate lacus. Cras ornare id ex sed dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin libero
            libero, porttitor et ultrices vel, sagittis eu nisl. Aliquam iaculis auctor neque quis porta. Integer tristique, metus eu pulvinar pulvinar, est ante vehicula risus, in sagittis metus lectus non purus. In laoreet dapibus eros, vel suscipit
            ante suscipit ac. Quisque ultrices quis sem ut elementum. Suspendisse ullamcorper ac purus a maximus. Donec sollicitudin odio a pellentesque tempus. Nam sed nibh eu turpis ullamcorper tristique eu sit amet mi. Nam eu consectetur lectus, id
            auctor arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse vitae volutpat leo, elementum vulputate nisl. Vestibulum urna sapien, dictum nec tempus a, vehicula quis orci. Phasellus imperdiet
            quam quis vestibulum posuere. Proin posuere, lectus at finibus rhoncus, turpis quam hendrerit ipsum, quis egestas mauris tortor a nibh. Nulla condimentum massa commodo libero tempor, non ornare libero porta. Nulla eget scelerisque tortor,
            in malesuada tortor. Suspendisse pharetra risus a tellus fermentum lacinia. Pellentesque in vehicula magna. Proin risus ipsum, condimentum et tortor vel, ultricies tristique tortor. Ut fringilla, nibh sed hendrerit tempor, arcu quam vulputate
            sem, non rutrum dui augue accumsan felis. Nunc ut cursus odio. Morbi vitae eros maximus, convallis elit ut, elementum metus. Aenean posuere non urna ac elementum. In hac habitasse platea dictumst. Integer dictum eu ipsum sit amet mollis. Generated
            5 para

          </div>

Answer 2

Waaay too much code, and also I'm not sure I understand your question. But if the gap between the left column with the image and your content block is the issue: your 25% margin seems just fine, it's your container div that's centered with margin: auto; that's causing it.