Need help with portfolio. Centering/borders/etc

HTML-CSS
#1

Struggling at an extreme level here. Trying to build my portfolio. I’m good with the nav bar for now and the welcome <div<. My problems are coming from the core content of the portfolio, the thumbnail collection. I copied this code from Codepen and planned to edit it later but all of the commands i try to personalize it do nothing, or something horrendous - frustrating after four hours. At the very least I need to center these thumbnails, which i cannot do. Also the border is for some reason not showing up on the right side of the thumbmail.

HTML: 

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="portfolio.css">
	<link href="https://fonts.googleapis.com/css?family=PT+Sans|Ubuntu" rel="stylesheet">
	<title>Braden Linick</title>
</head>
<body>
	<header>
		<div class="container">
			<nav id="navbar">
		      <ul>
		        <li><a class="navlink" href="#About">About</a></li>
		        <li><a class="navlink" href="#Services">Features</a></li>
		        <li><a class="navlink" href="#Contact">Contact</a></li>
		      </ul>
   			</nav>
   		</div>
	</header>
	<div class="welcome">
		<h1 class="hi">Hi. I'm Braden</h1>
		<p class="web">a web developer</p>
	</div>
	<div class="projects">
		<h2 class="projhead">These are some of my projects</h2>
		<a href="https://codepen.io/FreeCodeCamp/pen/NNvBQW" target="_blank" class="project project-tile">
    <img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642794/d084d718-6171-11e6-83fa-ede5d0a67ad2.png" alt="project">
    <div class="project-title">Tribute Page</div>
  </a>
  <a href="https://codepen.io/FreeCodeCamp/pen/ONjoLe" target="_blank" class="project project-tile">
    <img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642771/7cd6a0c4-6171-11e6-87fb-915f6084d104.png" alt="project">
    <div class="project-title">Random Quote Machine</div>
  </a>
  <a href="https://codepen.io/FreeCodeCamp/pen/PNKdjo" target="_blank" class="project project-tile">
    <img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642772/7d02406c-6171-11e6-8c79-40a2933163dc.png" alt="project">
    <div class="project-title">JavaScript Calculator</div>
  </a>
  <a href="https://codepen.io/FreeCodeCamp/pen/mVEJag" target="_blank" class="project project-tile">
    <img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642773/7d08cb94-6171-11e6-8c45-22e7cf64683e.png" alt="project">
    <div class="project-title">Map Data Across the Globe</div>
  </a>
  <a href="https://codepen.io/FreeCodeCamp/pen/wGqEga" target="_blank" class="project project-tile">
    <img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642774/7d091806-6171-11e6-8d47-ecf2f2833fe2.png" alt="project">
    <div class="project-title">Wikipedia Viewer</div>
  </a>
  <a href="https://codepen.io/FreeCodeCamp/pen/KzXQgy" target="_blank" class="project project-tile">
    <img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642775/7d354304-6171-11e6-8b56-66eee4681d88.png" alt="project">
    <div class="project-title">Tic Tac Toe Game</div>
  </a>

  <a href="https://codepen.io/FreeCodeCamp/" class="show-all" target="_blank">Show all</a>
</div>
	</div>
</body>
</html>

CSS: 

body,html {
	background-color: #C7D2E9;
	font-family: PT sans;
	margin: 0;
}

.container {
	width: 80%;
	margin: 0 auto;
}

header {
	background: #627397;
}

nav {
	float: right;
}

header::after {
	content: '';
	display: table;
	clear: both;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

nav ul li {
	display: inline-block;
	margin-left: 70px;
	padding-bottom: 2px;
	padding-top: 7px;
	position: relative;
}

nav a {
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
}

nav a:hover {
	color: black;
}

nav a::before {
	content: '';
	display: block;
	height: 5px;
	width: 100%;
	background-color: #C7D2E9;
	position: absolute;
	top: 0;
	width: 0%;
	transition: all ease-in-out 250ms;
}

nav a:hover::before {
	width: 100%;
}

.welcome {
  top: 0;
  background: #627397;
  min-height: 55vh;
  padding-top: 45vh;
  height: auto;

  /*   line-height: 100vh; */
  /*   width:100%;
  height:96vh;
border:solid; */
}

.web {
  color: white;
  text-align: center;
  margin: 0;
}

.hi {
	font-family: ubuntu;
	text-align: center;
	margin: 0;
}

.projects {
	background-color: #C7D2E9;
	padding-top: 60px;
	margin-top: -60px;
	
}

.projhead {
	margin-top: 50px;
	text-align: center;
	color: #0B265C;
}

.project {
  text-decoration: none;
  text-align: center;
  color: black;
  display: inline-block;
  overflow: hidden;
  border: .5px solid black;
  height: 220px;
  width: 280px;
  margin: 40px 100px;
}

.project-pic {
  width: 100%;
  height: 180px;
  border: .5px solid black;
}

.project-title {
  font-weight: bold;
}

.show-all {
  text-decoration: none;
  display: block;
  width: 200px;
  height: 30px;
  margin: 20px auto 90px;
  background: #e0ebe8;
  color: #008080;
  font-weight: bold;
  font-size: 1em;
  border: 2px solid #90C695;
  border-radius: 4px;
  cursor: pointer;
  padding-top:10px;
  text-align: center;
}

Browser: Google Chrome

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Portfolio project HTML/CSS

#2

Hello Braden,

You may please host your code, beside the CSS(if any) and share the link?
Thanks.

#3

How do I share the site if it’s not hosted? Sorry I’m new to this. Also the CSS is in the HTML and i accidentally added it in one.

#4

Create an account with codepen.com , or any other similar site you like like codesandbox.com

Then create a new pen/page, and add HTML, CSS and JS parts.

Save the project, it give you a valid url, so you share it with us to see your work

Please ask for any process you get stuck, thanks.

#5

Here you are. Thanks.

#6

Thanks, the fix is easy,

but before I want to talk about the fix, I see you do some weird mysterious coding on your css, I highly recommend you please don’t, for example:

.projects {
    background-color: #C7D2E9;
    padding-top: 60px;
    margin-top: -60px;
}

You applied top padding, then applied negative top margin!? please!

And about the issue, by default page layout for contents is left-to-right, just like the project cells/boxes you like to center them.

Please note trying to center them using hacky coding like trying some margin is very bad idea!

The fix is easy, for any element you like to make it center, you first need to find out if the element is an block element(like div) or inline (like anchor(a tag), span, etc…)

If the element is block, so if you ask to apply same margin for left and right will make it center, for example considering following code:

<div>
<div style="margin:auto auto">
Centered block element, but this text is left-to-right.
</div>
</div>

Sample work about centered block element. (note the .grid_c css rule)

And when you want to center a inline element(you case), you first need to find out the parent, and tell the parent center the contents using text-align:center e.g.:

<div style="text-align:center">
Hello Braden, I'm a centered text and I'm so happy :) 
</div>

Sample work about centered element like this one.

Now your part, find the elements you like to center, and as explained above, try to make them center.

Again, please remove all unnecessary CSS stuffs, or they will make trouble for you later.

Happy coding.

#7

OMG thank you so much. So easy idk how i didnt get that -_- Much appreciated.

Also, https://codepen.io/freeCodeCamp/pen/zNBOYG this is the FCC example which contains the margin/padding top: 60px/-60px … i was confused by that also but just went with it as it came from FCC.

#8

This is one reason we all take mistakes dear, please accept even expert do bugs(and much more than newbys if you ask me).

Thanks for informing, I will ask the contributors/manager to have a look and maybe fix it! or maybe I’m wrong! IDK! we will find out.

Keep going on great work, happy programming.

#9