I’m currently making my portfolio site and you can see it here.
One of my (many) issues is that there is a small extra margin on the right side. I tried margin: 0 for the body, but no luck. I tried using the developer tool in chrome to figure out the cause but that doesn’t help me either. Aside from this issue, it seems that my program “weather.png” is not loading, but my profile image is. 
This is my
html file
<head>
<title>Dana's Portfolio</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.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="https://use.fontawesome.com/81c406da02.js"></script>
</head>
<body data-spy="scroll">
<header>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container-fluid" id="nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#about">About<span class="sr-only">(current)</span></a>
</li>
<li>
<a href="#languages">Languages</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resume<span class="caret"></span></a>
<ul class="dropdown-menu navbar-inverse">
<li><a>Download</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="parallax-window" data-parallax="scroll" data-image-src="images/above-adventure-aerial-air.jpg" id="head-window">
<div class="col-sm-6" id="name-div">
<h1>Dana C. Ottaviani</h1>
</div>
</div>
<div class="container-fluid" id="about">
<p>
<a href="https://www.pexels.com/photo/flight-nature-sky-flying-36487/" target="_blank">Image source</a>
</p>
<div class="row">
<div class="text-center">
<span class="section-header">About Me</span>
</div>
<div class="row text-center">
<div class="">
<img src="images/Dana.jpg" class="profile-pic">
</div>
</div>
</div>
</div>
<!--Skills-->
<div class="container-fluid" id="languages">
<div class="row">
<div class="text-center">
<span class="section-header">Languages</span>
</div>
</div>
<div class="row text-center icon-row">
<!-- Java logo and JS logo source: https://www.iconfinder.com/iconsets/scripting-and-programming-languages -->
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="images/html5.png">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="images/css.png">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="images/JS.png">
</div>
</div>
</div>
<div class="container-fluid" id="projects">
<div class="row">
<div class="text-center">
<span class="section-header">Projects</span>
</div>
</div>
<div class="row text-center project-row">
<div class="col-md-6 project">
<span class="name">Weather App</span><br>
<img class="project-image image-responsive" src="images/weather.png">
</div>
<div class="col-md-6 project">
<span class="name">Weather App</span><br>
<img class="image-responsive project-image" src="images/weather.png">
</div>
<div class="col-md-6 project">
<span class="name">Weather App</span><br>
<img class="image-responsive project-image" src="images/weather.png">
</div>
</div>
</div>
<footer id="contact" class="text-center">
<span class="section-header">Get in Touch</span>
<div class="row">
<a href="tel:+8607974288"><i class="fa fa-phone fa-3x" aria-hidden="true"></i></a>
<a href="mailto:dana.ottaviani@gmail.com"><i class="fa fa-envelope fa-3x" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/danaottaviani" target="_blank"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a>
<a href="https://github.com/Dana94" target="_blank"><i class="fa fa-github fa-3x" aria-hidden="true"></i></a>
<a href="https://www.freecodecamp.com/dana94" target="_blank"><i class="fa fa-free-code-camp fa-3x" aria-hidden="true"></i>
</a>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!--Used from http://pixelcog.github.io/parallax.js/-->
<script src="parallax.js-1.4.2/parallax.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
css file
/*1) Parallax*/
/*2) General*/
/*3) Bootstrap*/
/*4) Honors, Employment*/
/*5) Courses*/
/*6) Skills*/
/*1) Parallax*/
.parallax-window {
background: transparent;
color: white;
width: 100%;
}
@media (max-width: 960px){
#head-window{
height: 400px;
}
}
@media (min-width: 961px){
#head-window{
height: 550px;
}
}
/*.small-window{
min-height: 375px;
}*/
p{
background-color: #1C0B23;
text-align: right;
padding-right: 2rem;
}
a{
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
i{
color: #1C0B23;
}
.img-source a{
color: #0bb3bf;
background-color: #1C0B23;
}
@media (max-width: 768px){
.img-source{
margin-top: -10px;
}
}
/*2) General*/
h1{
text-align: center;
padding-top: 8rem;
font-size: 70px;
}
footer, .row{
color: white;
font-size: 20px;
margin-top: -10px;
padding-top: 20px;
padding-bottom: 20px;
}
#about{
background-color: #1C0B23;
}
#languages{
background-color: #43324b;
/*bright purple: #7c43bd;*/
/*grey: #a49da7;*/
}
#projects{
background-color: #766c7b;
padding-bottom: 10px;
}
#contact{
background-color: #e8e6e9;
color: #1C0B23;
}
/*3) Bootstrap*/
@media (max-width: 810px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
.navbar-brand{
text-align: left;
}
#nav{
font-size: 20px;
clear: both;
width: 100%;
height: 20%;
}
.dropdown ul li a{
font-size: 20px;
color: gray;
}
.project{
margin-bottom: 10px;
}
/*.container{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
} */
/*For help and credit: https://codepen.io/envincebal/full/BRvBOm/*/
.project-row, .icon-row {
padding: 0 0 20px 0;
}
.project-image:hover {
box-shadow: 6px 6px 6px -3px rgba(0,0,0,0.75);
}
.project-image {
/*height: 100%;*/
transform: scale(.8);
transition: box-shadow 0.2s ease-in-out;
cursor: pointer;
margin-top: 5px;
}
.img-responsive{
display: block;
max-width: 100%;
height: auto;
}
img {
max-width: 100%;
vertical-align: middle;
border: 0;
}
.section-header {
padding: 0 0 20px 0;
font-size: 30px;
}
.profile-pic {
border-radius: 100%;
border: 5px solid;
max-width: 230px;
/*margin-right: 30px;*/
}
Aside from these problems, if you have any opinions of my site overall, I would appreciate any feedback.
Thank you!