My Css for Background Color Won't Fill Entire Section

The site is supposed to be a scrolling parallax website with several fixed background image. In this particular problem section, I have two divs next to each other. the top one has a fixed background image with h2 text. Its kind of supposed to serve as a header of sorts for the bottom div that contains my info text. For some reason, when i set the background color on the info text div, there remains a thin white space between the bottom of the fixed image div and the top of the info text div.

i know that stuff like this can be caused by margins collapsing so i have tried the following:

I tried setting margins to 0px(also 1px), taking out all margins and using padding instead, setting all padding to 0px and 1px, changing the image size, and changing the image height. Nothing has worked.

.aboutme {
  background: url('../img/aboutme11.png') no-repeat;
  font: 'Century Gothic';
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 25%;
  position: absolute;
  color: #fff;
  font-size: 800%;
}

.aboutmetxt {
  font-size: 150%;
  overflow: auto;
  padding: 0px 80px;
  background-color: #323232;
  color: #f2f2f2;
}

<div id="paralax1" class="aboutme">
  <h2 style="font-size:100%; padding-top:50px;">About Me
    <h2>
</div>

<div id="aboutme" class="aboutmetxt">
  <p> I am a self taught Front end developer and Graphic Designer Currently Located in Los Angeles California. I am pursuing an opportunity to began a career in Web Development. This responsive website site was one of my first projects. I built using the
    skills I have learned from programing in JavaScript, HTML and CSS. I Currently attend California State University Northridge and am finishing my BA in Graphis Design with a minor in Computer Science.     </p>
</div>

Solution

So, there's many, many mistakes within your code, from incorrect spelling in the about me text to using the wrong CSS Property. So, I tried to fix all of them...

Here's your original code: https://jsfiddle.net/tvdchajo/1/

Here's the new code (I know most people just want the code rather than the explanation.)

.aboutme {
  background: url('../img/aboutme11.png'), no-repeat;
  font-family: 'Century Gothic';
  position: relative;
  min-height: 25%;
  position: absolute;
  color: #fff;
  font-size: 800%;
}

.aboutmetxt {
  font-size: 150%;
  overflow: auto;
  padding: 0px 80px;
  color: #f2f2f2;
}

body {
  background-color: #323232;
}

<div id="paralax1" class="aboutme">
  <h2 style="font-size:100%; padding-top:50px;">
    About Me
  </h2>
</div>

<div id="aboutme" class="aboutmetxt">
  <p> I am a self taught Front-End Developer and Graphics Designer. I am currently located in Los Angeles, California. I am pursuing an opportunity to begin a career in Web Development. This responsive website site was one of my first projects. I built using the
    skills I have learned from programming in HTML, CSS and JavaScript. I'm currently attending 'California State University, Northridge' and I'm finishing my BA in Graphics &  Design with a minor in Computer Science. 
  </p>
</div>

So basically, all I did here was give body { the background colour you used for the .aboutmetxt {.

Here's another JSFiddle of my version of your webpage: https://jsfiddle.net/tvdchajo/2/

Use VW and VH for responsive websites. They're two very useful CSS Units.