There could be something in my CSS code that doesn't belong

I'm currently enrolled in a course that requires completing a programming exercise for grading purposes. While I've had success with other exercises, this particular one is giving me trouble. Here are the issues I keep encountering:

The labels marked as 'NEW' within span tags should have a color of '#fa9f42' (plus 1 related test). The element with the ID 'copyright' should have a font size of 0.75em.

Below is a snippet of my code where I've included these specifications:

body {
  background-color: #E0E0E2;
}

h1 {
  color: #721817;
}

h2 {
  color: #721817;
}

.center-text {
  text-align: center;
}

#logo {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

h2 span {
  color: #FA9F42;
  font-size: 0.75em;
}

#copyright {
  padding-top: 12px;
  font-size: 0.75em;
}

Additionally, here are the instructions provided in the readme file:

  1. Open the styles.css file.

  2. Add a CSS rule for the body element setting its background color to #E0E0E2.

  3. Create a CSS rule for the h1 element changing its text color to: #721817.

  4. Add a CSS rule for the h2 element setting its text color to: #721817.

  5. Include a CSS rule for the center-text CSS class to align text to the center.

  6. Add a CSS rule for the HTML element with the id logo. Adjust its left and right margins to auto and change its display to a block element.

  7. Insert a CSS rule for all span elements that are children of h2 elements setting their text color to #FA9F42 and their font size to 0.75em.

  8. Create a CSS rule for the HTML element with the id copyright. Set its top padding to 12 pixels and its font size to 0.75em.

I've attempted resubmitting without any improvement.

Answer №1

Modifying the h2 span to h2>span not only resolved the initial issue, but also corrected the subsequent one. Appreciate your assistance.

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

The alignment of Bootstrap's Tabs is not centered as expected

I'm having trouble aligning the tab list to the center. The image below shows that it's currently shifted to the left. I've already included the Bootstrap class center-block, but it doesn't seem to be working. Can anyone help me out wit ...

Logging DOM elements with Electron's webview preload feature

Within my Electron program, I am utilizing a webview in my index.html file. The webview is equipped with a preloader, and my goal is to manipulate the DOM of the webview specifically, not just the index.html file. In my preloader code snippet below, the c ...

Customize Text Area's Font Based on Selected Option in Dropdown List

I'm currently working on an HTML file that includes a dropdown list and a text area. Here's the code snippet: <select id='ddlViewBy' name='ddlViewBy' onchange='applyfonttotextarea()'> <option value = ' ...

Stop the iframe video when the modal is closed

I'm currently developing a website that incorporates the code showcased in this tutorial to launch a modal window featuring an iframe for playing YouTube or Vimeo videos. The issue arises when, as mentioned in the comments on the tutorial page, there ...

The image inside an Ionic card's header will automatically adjust its size when text is added

Two cards are currently being displayed on the page: <ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-card class="offersCard"> ...

Opacity in text shadow effect using CSS

Within my text lies the following css snippet: .text-description-header { font-size: 250%; color: white; text-shadow: 0 1px 0 black; } Observe the dark shadow effect it possesses. Inquiry I am curious if there is a way to alter the shadow t ...

Looking to authenticate a CSS span class within an XML document using Oxygen Program?

This is in connection with my initial query. The XML does not recognize the CSS span class. <l rend="indent"> <span class="face_dropcap_ ">C</span><hi rend="initial_roman">E</hi>stoit alors que le prefent des <span class= ...

Working with Facebook Graph API data using javascript

I am attempting to parse output results from the Facebook Graph API (specifically comments on a website). Below is the script I am using: if (document.getElementById('comments')) { var url = "https://graph.facebook.com/fql?q=select+xid%2C ...

The functionality of aria-expanded="true" is not functioning properly when accessed on mobile devices

I am facing an issue where "aria-expanded="true" does not work when the user closes the dropdown on mobile devices, but it works perfectly fine on desktop browser pages. Desktop <a class="notifLink" data-toggle="dropdown" aria-haspopup="true" id="noti ...

Adding and adjusting the size of different DIV elements within a shared area

Looking to create a dynamic bar with the ability to add multiple child DIVs (similar to this: https://i.stack.imgur.com/tdWsq.jpg). Utilizing jQuery, jQuery UI, Bootstrap, and various plugins. The structure for the div (or span) system could be structured ...

Executing Cross-Component Communication in Angular 7: A Quick Guide

I've encountered a challenge with a checkbox in the header component. If the checkbox is checked, I need to display an alert message when the application loads. The tricky part is that the checkbox is linked to the home component. Therefore, if I am o ...

Sliding Feature

Can someone assist me with implementing a jQuery half slide function from left to right? Please check out the following URL for more information: http://jsfiddle.net/prabunivas/Fy9Hs/2/ <div> <div id="col1" style="float:left"> &l ...

The text following a table is spilling into the table because it is too big to fit within the designated div

I've been searching for a solution to this issue (it's a common problem), but nothing I've attempted has resolved it. Currently, I am using jQuery Mobile. Below is the code snippet in question: <div style="width:100%; height:220px;"> ...

Concealing or revealing an image with jQuery when hovering

I currently have 3 <a> tags within my html, each containing 2 images. Specifically, the greyscale images are the ones that are visible while the colored ones are set to display:none. I am aiming to achieve a functionality where upon hovering over th ...

Making <div> elements responsive by rearranging their display order using CSS in media queries, troubleshooting issues with floats, and adjusting font sizes

I'm currently working on a webpage located at: On this page, there is a containing division with 5 elements inside. They are floated left in order to align vertically, but I am facing some challenges when it comes to adjusting my CSS for media querie ...

Is it possible to transform all scripts into a React component? (LuckyOrange)

I am currently working on converting the script for a specific service (http://luckyorange.com/) into a component. The instructions say to place it in index.html within the public folder, but that appears to be insecure. I'm uncertain whether this tas ...

Is it possible to use JQuery ScrollTop while in the midst of an animation?

I am facing an issue with resizing containers and scrolling to elements. I have 2 containers that change width dynamically, each containing clickable elements. When a container is clicked, it animates the resize. However, when a clickable element is clicke ...

Initial space in model variable not being displayed

Hey there, I am working with a model variable called "name" that is linked to a span element like this: <input type="text" ng-model="name"> <span ng-bind="name"></span> My goal is to display the text entered in the input field without r ...

Words spilling onto the picture

The issue of the text col-xs-9 col-md-9 overlapping with the image col-xs-3 col-md-3 has been persistent. Even after attempting to add the img-responsive class to the img src, it continues to not work as expected. Interestingly, CSS was intentionally avoid ...

The header and logo are missing from my webpage

I am facing an issue where my navigation bar is not displaying at the top of my screen, even though there are no syntax errors. Is there something in the syntax that needs to be adjusted? Or did I overlook something in my default template file? The webpage ...