Did you mean to have the image, About Me section in the same div with class=“jumbotron”? If not, then you should put a closing div before the div with class=“solidbackground”. If you did intend to put them in the div with class=“jumbotron”, then you should follow @sfiquet’s advice.
EDIT: After reading the Bootstrap 4 documentation, you can add .jumbotron-fluid class to the div with class=“jumbotron” and then change your html to the following for the INTRO section. Note the removal of the extra container row/col divs and the addition of the .text-center class to the divs with class=“container” which will center the content.
<!-- start of INTRO -->
<div id="intro" class="jumbotron jumbotron-fluid">
<div class="container text-center">
<img id="mountain" class="img-responsive rounded-circle center-block hidden-xs hidden-sm" src="https://www.globetrottinkids.com/content/forum/uploads/bb-plugin/cache/highlands-and-islands-1629079_1280-1024x576-square.jpg" alt="munro" />
<div class="solidbackground text-center">
<h1 class="text-center">About Me</h1>
Hi, my name is Kyle and I am an architectural assistant interested in learning to code. I have started FreeCodeCamp to help me achieve this.
<!-- end of INTRO -->
FYI - At the top of your html code, you have the following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
You can get rid of both of the references to Bootstrap 3, because you added the reference to Bootstrap 4 using the settings gear of the CSS module already.