So, I’ve been trying so many things to fix this, and I’m not sure what I’m doing wrong here. It looks real nice on a desktop, but mobile looks awful… Please do help, and post suggestions. Thank you. Also here is what it looks like on mobile: http://mobt.me/WsHx
<!DOCTYPE html>
<html>
<head>
<title>Trent Norris</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1c2aef;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: black;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #1c2aef;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TrentNorris.TK</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Trent Norris</a></li>
<li><a href="#section2">About Me</a></li>
<li><a href="#section3">My Portfolio</a></li>
</li>
</ul>
</div>
</div>
</div>
</nav>
<center>
<div id="section1" class="container-fluid">
<h1>Trent Norris</h1>
<h2>Novice at HTML/CSS</h2>
<h3>In the future, I plan to learn PHP, Python, Java, and C.</h3>
<img class="img lg-image" src="/placeholderperson.png" alt="My placeholder for my photo!">
</div>
<div id="section2" class="container-fluid">
<h1>About Me</h1>
<p>My name is Trent Norris, I'm (age) from the US. The reason for this site is to display my projects, and my portfolio for the future.</p>
<p>I'm learning HTML5 and CSS3; next I will be learning PHP.</p>
<div class="img-responsive col-xs-12">
<img src="html5.png"/>
<img src="css3.png"/>
</div>
</div>
<div id="section3" class="container-fluid">
<h1>Portfolio</h1>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
</center>