Mysterious extra margin on right side and image not loading


#1

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. :confused:

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!


#2

There’s something about bootstrap which is setting the ‘row’ class to have a right-margin: -15px

There are some fixes on here you can try. Although, they seem like hacks. There’s something not quite right about your bootstrap setup. I don’t know what though!

As far as the weather not showing up, are you sure the image is there? Can you navigate to it manually?


#3

Add this to your CSS temporarily to help debug the issue:

* {
  border: 1px solid black;
}

As you will see, you have an extra nested row in your About section and your footer is missing a container. Once you fix those issues, the extra margin will be gone.


#4

About the image, working on the site locally I used “weather.png”. Changing it to “weather.PNG” like it is titled in my images folder fixed it. I should probably change the “.png” to lowercase in the name anyway but it’s strange that it didn’t have that effect until after I made it live.


#5

I did not know that trick. Thank you so much!