Heading and paragraph text within the same row

I'm currently facing a challenge while working on the personal portfolio webpage project for freecodecamp. Everything looks good except for one issue.

Although I have managed to center align my heading and paragraph text as intended, the paragraph text seems to be ignoring the <p> element altogether.

I tried adding a break line but it didn't help. Any assistance with this problem would be greatly appreciated before I proceed further with completing this task.

body {
  background-color: #0d3d95;
}

.welcome-section {
  display: flex;
  flex-diection: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

#projects {}

h1 {
  font-family: monospace;
  font-size: 16px;
  color: white;
  text-align: center;
}

p {
  font-size: 20px;
  color: white;
}

#navbar {}

a {
  color: white;
  text-decoration: none;
  font-family: helvetica;
}

ol {
  display: inline;
}

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #8524e9;
  border-bottom: 5px solid #042574;
}
<!--nav section-->
<nav id="navbar" class="nav">
  <ul>
    <ol> <a href="#">About<a/></ol>
    <ol> <a href="#">Contact<a/></ol>
    <ol> <a href="#">Projects<a/></ol>
</ul>
    </nav> 
<!--End nav section-->
    
<!--Welcome  Section Start-->
<section id="welcome-section" class="welcome-section">
  <h1>Hey I am Mimic</h1>
  <p>a web developer</p>
</section>
<!--Welcome  Section End-->
<section id="projects">
 
</section>

Answer №1

Within the welcome-section, it is recommended to use flex-direction: column; as there may have been a typo in the previous implementation.

Answer №2

There seems to be a mistake in the flex-direction: column; property within the .welcome-section class. It appears that flex-diection: column; was written instead.

body {
  background-color: #0d3d95;
}

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

#projects {}

h1 {
  font-family: monospace;
  font-size: 16px;
  color: white;
  text-align: center;
}

p {
  font-size: 20px;
  color: white;
}

#navbar {}

a {
  color: white;
  text-decoration: none;
  font-family: helvetica;
}

ol {
  display: inline;
}

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #8524e9;
  border-bottom: 5px solid #042574;
}
<!--nav section-->
<nav id="navbar" class="nav">
  <ul>
    <ol> <a href="#">About<a/></ol>
    <ol> <a href="#">Contact<a/></ol>
    <ol> <a href="#">Projects<a/></ol>
</ul>
    </nav> 
<!--End nav section-->
    
<!--Welcome  Section Start-->
<section id="welcome-section" class="welcome-section">
  <h1>Hey I am Mimic</h1>
  <p>a web developer</p>
</section>
<!--Welcome  Section End-->
<section id="projects">
 
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sort the elements within the *ngFor loop according to the category upon clicking the button in Angular

Currently, I have a collection of items that I am iterating through using *ngFor. Above this list, there are category buttons available as shown in the HTML snippet below. My goal is to enable filtering of the list based on the category of the button click ...

What could be the reason behind encountering an NaN error while using these particular functions?

I recently delved into the world of JavaScript, starting my learning journey about two months ago. While going through a few tutorials, I stumbled upon an intriguing project idea. However, I've hit a roadblock that's impeding my progress. Every t ...

JavaScript | Determining the coordinates of where on the image X and Y were clicked

My goal is to determine the position of an x and y location when a user clicks on an image. This information will be used to add a spot to the image that displays relevant information. The content for the spot will be dynamically loaded from a SQL database ...

How to Extract Minutes in Datatables Timestamps and Apply Custom Styling

Working with Datatables v1.10 Right now, my table is showing a date in the second column in the format 17-04-2019 14:34, which is how it's stored in the database. The filtering and searching functionality are all working as expected. The current HTM ...

Why won't divs align vertically in the center?

I'm struggling to create a navigation bar layout where the icons are centered both horizontally and vertically within their cells. http://jsfiddle.net/digorydoo/j2v5m7gr/ I can't seem to pinpoint what's causing the issue with my current la ...

Issue with maintaining image aspect ratio; unable to utilize background-image: cover property

If what I am attempting is not feasible, please inform me. I am currently working on displaying images of various sizes without distortion. While most images look good, those with a smaller width than the container of 285px are getting distorted. I am fin ...

What is the best way to transform height in pixels to percentage in order to create a responsive design that adjusts smoothly on

Currently, I am in the process of developing a responsive grid system by using a max-width of 980px to convert my fixed PX widths to percentages. However, I am facing some challenges in updating the heights that are also set in PX to %. Could anyone provid ...

Is it possible to replace multiple li elements with multiple ul elements within a single ul for better organization?

In the world of HTML and CSS, there are endless possibilities for creating unique designs. Recently, I stumbled upon an interesting question that has been lingering in my mind without a clear answer. Typically, people use a single "ul" element to create a ...

The fieldset css in PrimeNG differs from the website's original design

On my website, the appearance of the fieldset can be seen here: https://i.stack.imgur.com/TTS8s.jpg. I did not make any CSS changes that altered the fieldset. I am utilizing primeNG v7 and Angular 7. <p-fieldset legend="Toggleable" [toggleable]="true" ...

Z-index problem occurring with rotateY on Safari and Chrome Mobile

https://jsfiddle.net/nxbg7rq3/ I've been struggling to get the .mask completely on top of the .screen in this example. It works fine in most browsers, but Safari and Chrome Mobile are giving me a hard time. I've experimented with various solutio ...

Positioning SVGs within a parent container while maintaining responsiveness

How can I anchor an SVG overlay with a circle in the bottom right corner while expanding the rest of the SVG to fill the remaining area of the container without distorting the circle? I've been able to position the SVG in the bottom right corner, but ...

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

I have a collection of links: <p><a href="#" class="floorplan initial" data-id="king"><strong>King</strong></a><br> 4 Bedrooms x 2.5 Bathrooms</p> <p><a href="#" class="floorplan" data-id="wood">< ...

Adding rows dynamically to multiple tables on a single page using a single function

I am facing a situation where I have multiple tables and a function that adds rows to these tables: <table id="table1" style=" border-collapse: collapse;"> <tr id="table1row1">... <tr id="table1row2">... <table id="table2" style=" bor ...

What methods can I use to guarantee that a cloned HTML element retains a specific property during Unit Testing?

During my HTML cloning process, I am using the following code snippet: var clone = document.getElementById('tempID').cloneNode(true); After creating the clone, I need to modify its ID by assigning a new unique identifier with clone['id&apo ...

Having trouble with the Jquery click event not functioning on an interactive image map in Chrome browser

I currently have an interactive image-map embedded on my website. Here is the HTML code: <div id="italy-map" class="affiancato verticalmenteAllineato"> <div id="region-map"> <img src="./Immagini/transparent.gif" title="Click on ...

Stuck autoplay feature when clicking

There is an issue with the play function in the built-in browser audio player. Initially, it starts automatically with the following code... function play(){ var audio = document.getElementById("myaudio"); audio.play(); } However, when modifying the code ...

Reveal/Conceal footer upon vertical scrolling

I am attempting to achieve the following goals: Display the div element when the scrolling position is greater than 20 Apply a fadeOut effect after a certain delay Prevent the fadeOut effect when hovering over the sticky footer This is my implementation ...

Learn the effective way to style ul elements within @mui/material/Menu using CSS

When the button is clicked, I want to apply the following styles to the ul: &.MuiList-root { padding-top: 0px; padding-bottom: 0px; } View the issue in action on this live sandbox: https://codesandbox.io/s/react-typescript-forked-tyd8n8?fil ...

Having trouble with the Cordova button not functioning on Android 9? A beginner seeks assistance

I attempted to create a button with the id of "clickme" that links to index.html and js/buttonexample.js. Although I could see the button on both the browser and android emulator, it wasn't functioning as expected when clicked. js/buttonexample.js d ...

Using Razor view form with various submit buttons

In my razor view, I have a BeginForm command surrounded by a loop that generates an HTML table with a submit button in each row. My concern is how do I identify which specific row the submitted form corresponds to when sending it back to the controller? T ...