Having Trouble Aligning Text in HTML and CSS?

I am a beginner in the world of web markup languages and am currently taking an online course. I'm having trouble getting the .mainfooter-links to align in the center using CSS. I would greatly appreciate it if someone could take a look at my code and point out where I may have made a mistake. Thank you in advance.

* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

#product-overview {
    background: url("freedom.jpg");
    background-repeat:repeat;
    width: 100%;
    height: 528px;
    padding: 10px;
}
...

<!DOCTYPE html>
<html lang="en">
...
</html>

htmlcss

Answer №1

an issue has been identified in the way you have defined your class name, make the following adjustment:

<ul class"main-footer-links">

change it to 

<ul class="main-footer-links">

you forgot to include the = sign :)

Answer №2

Please remember to include the equal character '=' In order to correct this code snippet, replace 

<ul class"main-footer-links">
with 
<ul class="main-footer-links">

Answer №3

@NoobLearns, I suggest adding the CSS property text-align: center to either the class .main-footer{} or .main-footer-links{} to align the list items in the center. Also, consider using a more advanced code editor like vscode to avoid common mistakes such as missing the equals sign (=) as pointed out by others here.

.Key-Feature-List,
.Key-Feature-Style,
.plan {
  display: inline-block;
  text-align: center
}
#Planlist,
.Key-Feature-List,
.Key-Feature-Style,
.plan,
.section-title {
  text-align: center
}
* {
  box-sizing: border-box
}
body {
  font-family: Montserrat, sans-serif;
  margin: 0
} 
   // The rest of the code remains the same...

Answer №4

Make sure to include the '=' sign in your code:

<ul class="main-footer-links">

Additionally, consider adding text alignment with the following CSS:

.main-footer-link {
  display: inline-block;
  margin: 0 16px;
  text-align: center;

}

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

Unique perspective on web design when accessed from a different laptop

Scenario : I am currently developing a mobile web version of my website Issue : While the design looks perfect when viewed on my laptop, it appears completely different and messy when opened on a friend's laptop. For instance: font-size i ...

htmlcssbootstrap-4ui-design

In MUI React, the opacity of the placeholder is customizable and can be easily adjusted. This allows for the placeholder to be hidden

Currently, I am facing an issue with a filled variant TextField from Mui React. I have tried to modify it using theme components, but the placeholder text becomes hidden when the field is not focused. See here for Before Focus And here for On Focus I hav ...

cssreactjstypescriptmaterial-uiplaceholder

`Stop the JW Player from playing several videos simultaneously`

I have a situation where I want to display multiple videos on the same page, but only one should be playable at a time. When a new video is started, the currently playing video should automatically stop. <div class="tab-pane active" id="abc"><d ...

javascripthtmlvideojwplayer

What is the best way to dynamically change the JSON-LD Script for the Schema?

Below is the script in question. Please read through it carefully. <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Product", "name": "Bat, &q ...

javascriptphphtmljqueryajax

Sketch the borders of the element (animated)

Seeking a way to create a button with an animated border that looks like it is being drawn. Current progress involves some code, but it's not working smoothly with border-radius set. (keep an eye on the corners) https://codepen.io/anon/pen/MbWagQ & ...

javascriptjqueryhtmlcss

Learn how to integrate Bootstrap with Vue.js TreeView in this tutorial

If you're looking to create a treeview using Vue.js, the code structure would resemble something like this: HTML: <!-- item template --> <script type="text/x-template" id="item-template"> <li> <div ...

javascriptcsstwitter-bootstrapvue.jstreeview

Using Jquery to create a slider that can display multiple div

I've got a simple code snippet here that handles sliding and expanding elements, but I'm running into an issue. When one div is expanded and I click on another link, it opens that div as well instead of closing the first one. Is there a way to ma ...

jqueryhtmlslideslidetogglesliders

Utilizing Jquery to implement active state and unique IDs during mouseover operation

I found this great example on Stack Overflow that demonstrates Jquery Show/Hide functionality when hovering over links. It works perfectly by showing the content of the next div when the corresponding link is hovered over. However, I'm facing an issu ...

jqueryhtmlcss

Revolutionizing Interaction: Unveiling the Power of Bootstrap 3

Would you be able to assist me in customizing buttons to resemble a typical dropdown link? <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown <span class="caret"&g ...

csstwitter-bootstraptwitter-bootstrap-3

jQuery Mobile is experiencing page height inaccuracies

My web application, built with jQuery Mobile 1.2.0, is encountering an issue with page height calculations on Windows Phone. While iOS and Android display correctly, there is a gap at the bottom of the page on Windows Phone. Is there a CSS-only solution t ...

javascriptjquerycsswindows-phone-7jquery-mobile

In AngularJs, I am unable to prevent my ui-sref anchor tag from being triggered using event.preventDefault()

Here is the code snippet I am working with: <a ui-sref="MyModule">My Module</a> When the link is clicked, the following function will be triggered: $scope.$on("$locationChangeStart", function (event) { if (!confirm('You have un ...

htmlangularjspreventdefaultui-sref

Responsive CSS design that adjusts to fit the content

Struggling to make the wrapper expand with its content... This is the structure: * { padding: 0; margin: 0; } body { background-color: #ccc; background-repeat:repeat; font: Tahoma, Geneva, sans-serif; color: #FFF; } .wrapper { width: 95%; margin: 0 au ...

htmlcsslayoutheight

Merging a generator of unpredictable quotes with a simulated typewriter effect

Recently, I've been experimenting with a project involving a random quote generator and wanted to add a typewriter-style animation when the generator displays a new quote. The challenge is that my knowledge of JavaScript is quite limited, making it di ...

javascripthtmljquery

Automatically close the previously flipped card in Bootstrap 4

I have a card container with multiple cards inside. When I click on a card, it flips to show the back. However, I want the previously clicked card to close when I click on another card. My current code is not working as expected despite trying various Jque ...

javascripthtmlcssbootstrap-4

Add a React component to the information window of Google Maps

I have successfully integrated multiple markers on a Google Map. Now, I am looking to add specific content for each marker. While coding everything in strings works fine, I encountered an issue when trying to load React elements inside those strings. For ...

htmlreactjstypescriptgoogle-maps

Ways to expand the tooltip width in Bootstrap-Vue

Is there a way to make the tooltip wider in Bootstrap Vue? I have a long statement to display in the tooltip, but it is only showing three words per row, resulting in a taller tooltip with less width. <div> <span id="disabled-wrapper" class=" ...

cssvue.jstooltipwidthbootstrap-vue

Turn off the ability for items in Isotope to be set to an absolute

Currently, I am customizing my portfolio and looking to implement my own method for positioning the portfolio items. The Isotope library typically uses absolute positioning with left and top properties to position portfolio elements. Even after trying to o ...

htmlcssjquery-isotope

Make your grid easily expandable with full width capabilities using the power of Bootstrap 4

I am currently working on creating a grid for a gallery that features an expanding preview to showcase more details. I found some helpful code in this informative article: https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/ Every ...

javascriptcssbootstrap-4flexboxgrid

Could you tell me how to determine the height of a page when converting it to a PDF?

I am facing a challenge trying to render a dynamic content PDF using puppeteer and react. The layouting is handled in Material UI for react, so using page-break-before:always is not feasible as it conflicts with the flex grid layout. My goal is to determin ...

javascripthtmlreactjspdfmaterial-ui

What is the method for inserting or passing a city value as a result into the input field with the value attribute set

This code is functioning properly, but the city it generates needs to be registered in #city How can I pass the value #city into an input field? value="cityname" <input id="city" name="input" value="cityname" /> <script> $(document).read ...

javascriptjqueryhtmlcss