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

CSS switch status toggle

Here's my code for a toggle switch from . I'm trying to change the label before the switch/checkbox to display "checked" or "not checked" based on the toggle state. When I click on the label, it changes the switch but not the text. JavaScript: ...

I'm having trouble with getting my Bootstrap CSS and JS links to function properly

The paths for the Bootstrap CSS and JS files have been included in the code, but unfortunately, they are not working. Instead, I am getting the following errors in the console: GET http://127.0.0.1:5000/[https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist ...

Recreate a null reference exception in a textbox following the action of clicking the Add button

How can I intentionally trigger a NullReferenceException in a textbox by changing its ID after clicking the Add button on the page? I have attempted to modify the textbox ID using developer tools before clicking the Add button, but the error is not thrown ...

Conceal a list of items within a div that has a particular class

This is a sample of my HTML code: <div class="row"> <div class="col-md-12"> <div class="scrollbox list"> <ul class="list-unstyled"> <li id="articulate.flute">articulate flut ...

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

Rearrange the li elements within multiple ul lists using JavaScript

Is there a way to reorder multiple ul-lists on my website using JavaScript? An example of the lists may be as follows: $(document).ready(function() { var ul = $('ul.filelist'); for (let u = 0; u < ul.length; u++) { const element = ul[ ...

html Tips for referencing a file in an input tag

Imagine you have a basic form with an <input type="file"> tag. What I aim to achieve is, once the user selects a file (which is an image), I want to display that file on the same page for viewing - providing a better user experience. I attempted to ...

Hidden text within a webpage that remains concealed until a specific link is activated

Just getting started with HTML and wanting to add animation to my project. I have a vision of an animation where clicking on an image will split open a half page of text and stuff. It should be similar to this example: ...

Is there a way to code a checkbox within a dropdown menu?

I am seeking assistance in making this dynamic I am still learning Laravel and require some guidance on how to program a checkbox within a select dropdown. Here is the HTML form I have: <div class="container w60"> <div class="row pad_y_2 ...

"When using Webpack and Sass, the background image specified with background: url() is processed correctly. However, when using webpack-dev-server, the image is

Currently, I am utilizing Webpack 2 in conjunction with webpack-dev-server and Sass loader. Here is my current configuration: { test: /\.scss/, loaders: [ "style", { loader: "css", query: { modules: false, sourceMap: true } }, ...

Combine all input values into one using jQuery

I have four text boxes and I want to append the value of each box to a certain text box with a comma on KeyUp function, in addition to the default value. The issue is that it keeps overwriting the previous value. I am looking for an output like this: 0 ...

Press here to unveil and modify using the Redactor JS WYSIWYG HTML editor

I am working on a project where I have three separate divs that are set to be editable using the attribute contenteditable="true". Additionally, I have configured the redactor wysiwyg toolbar to remain fixed on the page. Here is the structure in HTML: &l ...

Problem with the hover functionality of the <li> tag

I'm having an issue with applying the hover property to the li element in the sidebar. The hover effect works, but the icon tag is not showing the hover effect. I want the icon to also show the hover effect along with the li's hover effect. Here ...

Step-by-step guide on displaying a window containing text when hovering over a CSS class

As a beginner in css, html, and js, I created an html page with a table of athletes. Each row is identified by the css class "athlete-name", like this: <div id="message-hide" style="display: none"> Hello world! </div> <t ...

Is your form complete?

Is there a way to determine if all required fields in the current form are correctly filled in order to disable/enable navigation? Are there any specific properties or JQuery functions that can be used to check for form completion status? ...

`The Best Times to Utilize Various Image Formats Within a Single Webpage`

If I have two identical images displayed on a page at different sizes, what is the best option for optimizing performance? On one hand, using an image already sized correctly can improve performance, especially on mobile devices. On the other hand, using t ...

Implement the Bootstrap datetimepicker functionality for the specified div element

The date picker successfully functions when I assign the id to the input tag as shown below: <div class="col-sm-4" id="datepicker"> <input type="text" class="form-control" id="inputDate" placeholder="Date"> <span class="glyphicon gl ...

Top-notch loading icon using jquery

Recently, I embarked on the journey of learning Javascript and jQuery simultaneously, and to my surprise, it feels quite manageable. As I delve deeper into creating functions, I am currently working on displaying a loading image. While I initially used on ...

Troubleshooting: Twitter Bootstrap dropdown feature experiencing issues within navigation bar

I am facing an issue with getting the bootstrap dropdown to function properly. I have tested it on my mobile device and noticed that the menu does not drop down as expected. Here is a DEMO Below is the code snippet: <nav class="navbar navbar-inverse ...

"The functionality of the express post method does not seem to be working properly when accessing

I am having trouble retrieving form data sent using the "POST" method from an HTML form in my app.post method. I am unable to access anything from req.body. Can anyone point out what mistake I might be making? Here is my HTML form - <form method=" ...