My CSS is a CSMess! Portfolio Exam

Hello FCC Fam,

I have passed my Portfolio Exam. Yesssss! However, I have not been able to style my portfolio to my liking. I believe that I have over styled myself into a CSS ‘code freeze’. I cannot move my text to center or apply my margin and paddings.

Creating the div’s in order to structure my background blocks of color have possibly haulted me styling everything else. I don’t know for certain what I did. I cannot see my own mistakes yet.

Can anyone help me see where I went wrong. I have the passed exam here:

I have the updated work on Code Pen here:

   **Your code so far**
/* file: index.html */
<link rel="stylesheet" href="styles.css">

<!--Portfolio Test development for FCC  07/02/2022

Ok, I've completed the HTML portion and basic CSS
to pass my Portfolio Exam for FCC [@9:55 pm | 7/2/22].
For that I am grateful in sticking it out to the end

Possibly tomorrow I will do some personalizations
in CSS to finish it. In restarting my FCC journey
I've realized that even the older version has
updated how it structures expectations from its

Oddly enough I was shocked this time around, for
there were times I noticed I could style and layout
the structure without referencing my
'go-to' site for guidance. Wowzers!

I should stop underplaying my retention of
coding more, but not too much! Lord, humble my
keyboard strokes. ;-)




<header class="header">
<nav id="navbar">
	<a href="#" target="_blank">About</a>
	<a href="#" target="_blank">Work</a>
	<a href="#" target="_blank">Contact</a>
<a class="nav-link" href="#section_three">Section Three</a><br>

<body id="main">
<div id="greeting">
	<section id="welcome-section">
		<h1 >Greetings I'm Ebony</h1>
		<h2>a junior web developer</h2>


<div id="work">
	<section id="projects">
	<h2>Below are my independent learning projects</h2>
	<div class="project-tile">
		<a href="#" target="_blank"><img src="#" alt="#" /></a>


<div id="together">
	<section class="profile">
		<h2>Let's grow together...</h2>
		<h3>I'm currently seeking a remote paid-apprenticeship program.</h3>
		<div class="link-icon">
			<a id="profile-link" href="#" target="_blank"><img src="#" alt="email" /></a>
			<a id="profile-link" href="#" target="_blank"><img src="#" alt="phone" /></a>


<div id="divider"></div>


<footer id="footer" style="text-align: center;" class="footer">
	<p>&#169 2022 Eb's Still Learning. All Rights Reserved.</p>

/* file: styles.css */
/* Hey Eb! Don't forget. You have many repetitive
code blocks to simplify when you get your rest
and return.

Uh huh, thanks self. I appreciate the reminder.
Is Ebony talking to herself on la computadora?
Si, Yo soy asi divertido.

<h1>Goodnight World</h1>

.header {
	background-color: rgb(255, 87, 51);
	height: 80px;
	position: fixed;
	display: inline-flex;
	width: 100%;
	top: 0;
	left: 0;

body {
	display: block;
	width: 100%;
	margin: 80px 0px 0px 0px;
	padding: 0px;

@media (min-width: 800px) {
 body {
   width: 100%;

#greeting {
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	background-color: rgb(144, 12, 63);

#work {
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 1500px;
	margin-top: -20px;
	background-color: rgb(88, 24, 69);

#together {
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	margin-top: -20px;
	background-color: rgb(199, 0, 57);

#divider {
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 10px;
	margin-top: 0px;
	background-color: rgb(255, 87, 51);

#footer {
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	margin-top: -20px;
	background-color: rgb(199, 0, 57);

Can you give us a specific issue that you are trying to solve?

Hello again Bruce!

I was trying to center my “greeting” h1 and h2 in the center of my entire div in the “welcome-section”.

If I can figure this out I will be able to style the other texts for the other div’s.
I’m not sure how I restricted my movements yet I have.

I did not do well in remembering the importance of creating my “box” with
margins and padding. I was just focused on structuring my HTML foundations and passing the exam.

So, when I went to style I jumped right into setting the background the way I wanted and locked the rest of my styling abilities up. I feel…stupid.

Sometimes my creativity traverses my projects beyond my abilities and I get stuck. It hurts my feelings more than I care to dwell on. It’s frustrating. You know, to see the ending and not know how your faith and passion will get you there…it’s frustrating.

I like to draw and create things…so I’m familiar to creating landscapes. However, drawing pieces of artwork with code is challenging and, well when I’m
developing a “Codescape” I want it to be functional, legal code, that’s beautiful and sometimes my baby steps are like Neil Armstrong in his first spacewalk. Then other times, it’s like blindly tumbling and not seeing where you have fallen.

I want to do well, but I understand doing well is to make infinite mistakes. I
don’t like making mistakes. :frowning:

The h1 and h2 text in the #welcome-section look centered to me, but perhaps I am not understanding exactly what you mean by centered? Are you talking horizontal centering or vertical centering?

Hi! Don’t have much opportunity to dive into your CSS right now.
But I should say name of this topic is a good one)
Following you on codepen now.


Good morning! I was following the layout to the Portfolio Exam’s example.
The ‘greeting’ is within a large background block and the text is viewed in the center of one’s viewing screen.

I was not able to get my text aligned in such a manner. I would utilize the “!important” but I need to understand where my code is over-riding me.
I don’t see it.

I hope all is well this morning. We got rain. Thank goodness, we got rain.

Lol, I am glad I made you digitally smile. Take your time. I have moved on in the [NEW] Version…I will return as needed until it’s done.

I am getting used to the digital classroom via FCC Forum. Things feel different when you have supportive classmates that want me to succeed, comprehend and make learning fun.

Oh admit8490,

Some of my projects on CodePen are from the FCC [NEW] Version. To me it helps me learn. Yes it doubles my work, however, it becomes a reference project for future projects I have yet to create.

Just if you are interested in doing the same. Enjoy the rest of your day!

To clarify:
Do you mean you’ve finished Legacy course, and now doing New version of Responsive Web design?

UPDATE. Yesterday I ended up with some thoughts about my learning approach. Take a look if you wish, it is all about CSS specifically

If you are referring to placing your name right in the middle of the page, both vertically and horizontally, then I would look at using flexbox to do that, as it makes it very easy (and that’s what the FCC demo uses as well).

Yes, the Legacy courses.

Thanks Bobby.

Flexbox’n instead of shadowboxing my emotional torment! I appreciate your clarity. I need to apply “flexbox”.

Got it.
I have this plan:

I finished NEW one.
I didn’t touch legacy in case I will need to recall some basics.
So if I will be struggling with tables, for example, I will do ‘table’ stuff from legacy to get better.


I did it!..I mean we did it!!!

I did what you suggested and between you and I, we got the text centered. Thank you.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.