Reactive Web Design Does not work

I'm new to responsive web design, so I'm not sure why this isn't working, but it definitely has something to do with me. I'm not exactly sure how to make this current website "responsive", and I've been trying for a good while. Code shown below. It may help to run it via browser. NOTE: I would like to not use a 3rd party css library like Bootstrap

HTML

<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="img/favicon.ico" sizes="16x16" type="image/ico">
<head>
<meta charset="utf-8">
<title>OneClickLearn - Home</title>
</head>

<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="head">
<center>
  <h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
  </center>
</div>

<div class="sidecontentleft">

  <div class="sidecontent">
        <h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML <em>now</em></h3>
        <button class="green-btn txt-marginall">Learn HTML5!</button>
        </div>
    </div>

<div class="sidecontentleft">

  <div class="sidecontent"><h3>Learn the Cascading Style Sheet of web development!<br><br>Start Learning CSS <em>now</em></h3>
        <button class="blue-btn txt-marginall">Learn CSS!</button>
        </div>
    </div>

<div class="sidecontentleft">

  <div class="sidecontent">
        <h3 class="txt-marginall">Learn data storing in web development!<br><br>Start Learning PHP <em>now</em></h3>
        <button class="green-btn txt-marginall">Learn PHP!</button>
        </div>
    </div>

<div class="sidecontentleft">

  <div class="sidecontent">
    <h3>Create actions and animations!<br>
      <br>
      Start Learning Javascript <em>now</em></h3>
    <button class="blue-btn txt-marginall">Learn Javascript!</button>
        </div>
    </div>
<div class="sidecontentleft">

  <div class="sidecontent">
        <h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML5 <em>now</em></h3>
        <button class="green-btn txt-marginall">Learn HTML5!</button>
        </div>
    </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

body {
    margin:0;
    padding:0;
    }

/*nav*/
@media (min-width:600px) {
    .txt-jumbo {
        font-size:-40px;
    }
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float:left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

/*divs*/

.sidecontentleft {
    align-self:center;
    height:300px;
    width:300px;
    float:left;
    }

.sidecontentright {
    align-self:center;
    height:300px;
    width:300px;
    float:right;
    }

.sidecontent {
    text-align:center;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    }

.head {
    width:100%;
    height:350px;
    background-color:#05D7C6;
    color:white;
    text-align:center;
    }

.centered-divcontent {
    text-align:center;
    height: 350px;
    display: table-cell;
    vertical-align: middle;
    }

/*buttons*/

.green-btn {
    height:40px;
    width:auto;
    border-radius:5px;
    background-color:#04D43C;
    border:none;
    color:white;
    }

.green-btn:hover {
    height:40px;
    width:auto;
    border-radius:5px;
    background-color:#00F040;
    border:none;
    color:white;
    cursor:pointer;
    }

.blue-btn {
    height:40px;
    width:auto;
    border-radius:5px;
    background-color:#05D7C6;
    border:none;
    color:white;
    }

.blue-btn:hover {
    height:40px;
    width:auto;
    border-radius:5px;
    background-color:#00E9D6;
    border:none;
    color:white;
    cursor:pointer;
    }

.white-btn {
    border-radius:5px;
    height:40px;
    width:auto;
    text-align:center;
    border: #BFBFBF 1px solid;
    text-decoration:none;
    color:black;
    background-color:white;
    }

/*Fonts*/

.txt-jumbo {
    font-size:100px;
    }

.txt-centered {
    text-align:center;
    }

.txt-margin {
    margin-left:25px;
    }

.txt-marginall {
    margin-left:15px;
    margin-right:15px;
    margin-top:15px;
    margin-bottom:15px;
    }

h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}

Your help would be appreciated! Thanks!

.txt-jumbo , which styles the header font, has a default value of 100px . The media query you used specified font-size: -40px for screens wider than 600px. font-size cannot take a negative value.

To make the font smaller on small screens, try something like:

@media (max-width: 600px) {
    .txt-jumbo {
        font-size: 50px;
    }
}

where max-width: 600px means that the styles contained apply to screens less than 600px wide.

There are several ways to make the navigation "collapse". To make the links stack, make them inline-block elements and set their widths to 100%.

@media (max-width: 600px) {
    li {
        display: inline-block;
        width: 100%;
    }
}

When using a screen less than 600px wide, the links will now take up the entire width of the screen. display: inline-block allows them to stack.