What is causing my `<nav>` buttons to be left-aligned?

The attempt to center the buttons in the viewport using text-align:center for nav, ul, and li has proved ineffective. The alternative of nav {text-align: left;} was no more successful.

CSS Snippets:

#container {
    width: 100%;
    background-color: black;
    margin-left: auto;
    margin-right: auto;}

main {
    background-color: rgb(225, 234, 234);
    display: block;
    border-radius: 2em;
    border-top: medium solid powderblue;
    border-bottom: medium solid powderblue;
    margin-left: 0.8em;
    margin-right: 0.8em;
    padding-top: 1em;
    padding-right: 0.5em;
    padding-bottom: 1em;
    padding-left: 0.5em;}

.equip {
    width: 100%;
    margin-left: auto;
    margin-right: auto;}

h1 {
    color: powderblue;
    text-align: center;
    font-size: 1.7em;
    font-family: cursive,fantasy,"Times New Roman";
    font-style: italic;
    white-space: nowrap;}

nav ul {
    list-style-type: none;
    border-radius: 2em;}

nav ul li {
    text-align: center;
    padding-bottom: 0.3em;
    padding-top: 0.3em;
    border-color: powderblue;
    background-color: grey;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    border-radius: 3em;}

nav a {
    color: white;
    font-family: "Times New Roman";
    font-size: 1.3em;
    white-space: nowrap;
    text-decoration: none;}

footer {
    margin-top: 1em;
    padding-bottom: 1em;
    text-align: center;
    font-size: 0.8em;
    color: white;}
  1. HTML Code:

<!DOCTYPE html>
    <html lang="en-us">
    <head>
    <title>FFC|Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheet.css">
    </head>


    <body>


    <div id="container">

    <header>

            <img class="equip" src="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML Learn\Step-by-Step Guide\Forward Fitness Club\images\fitness club logo_grey_background.jpg"

                    alt="Forward Fitness Club ">

                 <h1>
                       Forward Fitness Club
                  </h1>

    </header>

    <nav>
            <ul>
                  <li> <a href="About Us.html"> About Us </a> </li>
                  <li> <a href="Classes.html"> Classes </a></li>
                  <li> <a href="About Us.html"> About Us </a></li>
                  <li> <a href="Nutrition.html"> Nutrition </a></li>
                  <li> <a href="Contact Us.html"> Contact Us </a></li>

            </ul>

    </nav>;

    <main>

           <p>Welcome to Forward Fitness Club. Our mission is to help our clients meet their fitness <b>AND</b> nutrition goals. <br>   </p>

            <h2> FREE ONE-WEEK TRIAL MEMBERSHIP</h2>


               <a href="Contact Us.html">Call Us today to Get Started</a> <br>


                  <h3>Fitness Club Hours</h3>

    <p>

    <ul style="list-style-type:none">
      <li style="text-align:left"> Monday-Thursday: 6:00am - 6:00pm</li>
      <li> Friday: 6:00am - 4:00pm</li>
      <li> Saturday: 8:00am - 6:00pm</li>
      <li> Sunday: Closed</li>
    </ul>

    </p>


    </main>

    <footer >

    <address>
               Copyright 2015. All Rights Reserved.<br>

             <a style="color:powderblue" href="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfbf4fdf2f9eff4b2e8dcfbf1fdf5f0b2fff3f1">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bfdf4e9ecfae9fffdf2eff5fee8e8f8f7eef9dbfcf6faf2f7b5f8f4f6">[email protected]</a></a>

    </address>

    </footer>

    </div>

    </body>
    </html>

Image 1 : Samsung Galaxy Note 2 viewport

Image 2 : Desktop browser viewport

https://i.sstatic.net/10l0T.png

https://i.sstatic.net/tZrMd.png

htmlcss

Answer №1

To center align an ul list and remove default padding on the left, apply the following CSS rules to nav ul:

#container {
  width: 100%;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
}

main {
  background-color: rgb(225, 234, 234);
  display: block;
  border-radius: 2em;
  border-top: medium solid powderblue;
  border-bottom: medium solid powderblue;
  margin-left: 0.8em;
  margin-right: 0.8em;
  padding-top: 1em;
  padding-right: 0.5em;
  padding-bottom: 1em;
  padding-left: 0.5em;
}

.equip {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  color: powderblue;
  text-align: center;
  font-size: 1.7em;
  font-family: cursive, fantasy, "Times New Roman";
  font-style: italic;
  white-space: nowrap;
}

nav ul {
  text-align: center;
  padding-left: 0;
  list-style-type: none;
  border-radius: 2em;
}

nav ul li {
  text-align: center;
  padding-bottom: 0.3em;
  padding-top: 0.3em;
  border-color: powderblue;
  background-color: grey;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  border-radius: 3em;
}

nav a {
  color: white;
  font-family: "Times New Roman";
  font-size: 1.3em;
  white-space: nowrap;
  text-decoration: none;
}

footer {
  margin-top: 1em;
  padding-bottom: 1em;
  text-align: center;
  font-size: 0.8em;
  color: white;
}
<!DOCTYPE html>
<html lang="en-us">

<head>
  <title>FFC|Home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <link rel="stylesheet" href="stylesheet.css">
</head>


<body>


  <div id="container">

    <header>

      <img class="equip" src="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML Learn\Step-by-Step Guide\Forward Fitness Club\images\fitness club logo_grey_background.jpg" alt="Forward Fitness Club ">

      <h1>
        Forward Fitness Club
      </h1>

    </header>

    <nav>
      <ul>
        <li> <a href="About Us.html"> About Us </a> </li>
        <li> <a href="Classes.html"> Classes </a></li>
        <li> <a href="About Us.html"> About Us </a></li>
        <li> <a href="Nutrition.html"> Nutrition </a></li>
        <li> <a href="Contact Us.html"> Contact Us </a></li>

      </ul>

    </nav>

    <main>

      <p>Welcome to Forward Fitness Club. Our mission is to help our clients meet their fitness <b>AND</b> nutrition goals. <br> </p>
      <!--<span style="font-weight: bold"> </span>-->

      <h2> FREE ONE-WEEK TRIAL MEMBERSHIP</h2>


      <a href="Contact Us.html">Call Us today to Get Started</a> <br>


      <h3>Fitness Club Hours</h3>

      <p>

        <ul style="list-style-type:none">
          <li style="text-align:left"> Monday-Thursday: 6:00am - 6:00pm</li>
          <li> Friday: 6:00am - 4:00pm</li>
          <li> Saturday: 8:00am - 6:00pm</li>
          <li> Sunday: Closed</li>
        </ul>

      </p>


    </main>

    <footer>

      <address>
               Copyright 2015. All Rights Reserved.<br>
    
             <a style="color:powderblue" href="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e7e8e1eee5f3e8aef4c0e7ede1e9ecaee3efed">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10767f62677162747679647e756363737c657250777d71797c3e737f7d">[email protected]</a></a>
    
    </address>

    </footer>

  </div>

</body>

</html>

Answer №2

For optimal performance, insert the following code: nav { text-align: center;}

 #container {
      width: 100%;
      background-color: black;
      margin-left: auto;
      margin-right: auto;}

 main {
        background-color: rgb(225, 234, 234);
        display: block;
        border-radius: 2em;
        border-top: medium solid powderblue;
        border-bottom:  medium solid powderblue;
        margin-left:  0.8em;
        margin-right: 0.8em;
        padding-top: 1em;
        padding-right: 0.5em;
        padding-bottom: 1em;
        padding-left: 0.5em;}

 .equip {
          width: 100%;
          margin-left: auto;
          margin-right: auto;}

 h1 {
    color: powderblue;
    text-align: center;
    font-size: 1.7em;
    font-family: cursive,fantasy,"Times New Roman";
    font-style: italic;
    white-space: nowrap;}


 nav ul {
          list-style-type: none;
          border-radius: 2em;}
          
          nav {  text-align: center;}
         main{  text-align: center;}
         address{  text-align: center;}
<!DOCTYPE html>
    <html lang="en-us">
    <head>
    <title>FFC|Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheet.css">
    </head>
    
    
    <body>
    
    
    <div id="container">
    
    <header>
    
            <img  class="equip" src="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML Learn\Step-by-Step Guide\Forward Fitness Club\images\fitness club logo_grey_background.jpg"
    
                    alt="Forward Fitness Club ">
    
                 <h1>
                       Forward Fitness Club
                  </h1>
    
    </header>
    
    <nav>
            <ul>
                  <li> <a href="About Us.html"> About Us </a> </li>
                  <li> <a href="Classes.html"> Classes </a></li>
                  <li> <a href="About Us.html"> About Us </a></li>
                  <li> <a href="Nutrition.html"> Nutrition </a></li>
                  <li> <a href="Contact Us.html"> Contact Us </a></li>
    
            </ul>
    
    </nav>

    <main>
    
           <p>Welcome to Forward Fitness Club. Our mission is to help our clients meet their fitness <b>AND</b> nutrition goals. <br>   </p> <!--<span style="font-weight: bold"> </span>-->
    
            <h2>  FREE ONE-WEEK TRIAL MEMBERSHIP</h2>
    
    
               <a href="Contact Us.html">Call Us today to Get Started</a> <br>
    
    
                  <h3>Fitness Club Hours</h3>
    
    <p>
    
    <ul style="list-style-type:none">
      <li style="text-align:center"> Monday-Thursday: 6:00am - 6:00pm</li>
      <li> Friday: 6:00am - 4:00pm</li>
      <li> Saturday: 8:00am - 6:00pm</li>
      <li> Sunday: Closed</li>
    </ul>
    
    </p>
    
    
    </main>
    
    <footer >
    
    <address>
               Copyright 2015. All Rights Reserved.<br>
    
             <a style="color:powderblue" href="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f6f9f0fff4e2f9bfe5d1f6fcf0f8fdbff2fefc">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99f968b8e988b9d9f908d979c8a8a9a958c9bb99e94989095d79a9694">[email protected]</a></a>
    
    </address>
    
    </footer>
    
    </div>
    
    </body>
    </html>

Answer №3

At times, browsers may apply the default user stylesheet if you are missing common styles in your class definition.

For example, consider the following images: https://i.sstatic.net/sVAHV.png

https://i.sstatic.net/PMyPP.png

If you encounter this issue, a simple solution is to add padding to your code:

padding: 0px

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 intended functionality of clicking on an image is exclusively reserved for its immediate parent element

I have a feature on my website that displays an image gallery. When a user clicks on an image, it opens up the image in full screen similar to Facebook's theatre mode. I have written code so that when the user clicks anywhere in the container of the i ...

javascriptjqueryhtmlimage

Press the div, excluding the button - Vue

I have a basic div that spans 100% of the width, containing a button inside. The issue I'm facing is that when I add a click event to the div, the entire div becomes clickable (including the button within it). What I want is for the whole div to be ...

javascriptcssvue.jsvuejs2vuejs3

I find myself unable to write any code using my Visual Studio Code

I'm facing an issue where I can't write any code on my Visual Studio Code. Despite following all the recommendations on the official website, I haven't been able to resolve the problem. More information here Here are the changes I have tri ...

pythonhtmllinuxubuntuvisual-studio-code

JavaScript not redirecting to HTML page as expected

I have developed a basic login page that makes an Ajax request to the backend. However, I am experiencing difficulties with redirecting the page upon successful login. The redirect function only seems to work 1 in 15 times, and I'm unsure of the reaso ...

javascripthtmlajax

Hiding the overflow conceals the entire image in one direction, while leaving the other exposed

Here is the code I have written for my project (view fiddle here): img { width: 200px; height: 200px; } .image-container { width: 600px; height: 200px; overflow: hidden; } I am working with multiple images, all sized at 200px by 200p ...

htmlcss

The HTML code appears to be functioning correctly in all web browsers except for Safari

There appears to be an issue with submitting the form in Safari browser. The form functions correctly in all browsers except for Safari. <form action="/commonDashboard" name="loginForm" method="post" autocomplete="off" id="loginForm"> <div&g ...

htmlsafari

Achieving optimal performance with scoped CSS in Vue.js

As I work on creating a new app using VueJs, I have noticed the implementation of "css scoped" as shown below: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> ...

javascriptcssvue.jsatomic

Interactivity Battle: Clickable Div, Button, or href?

I'm currently exploring the optimal methods for generating buttons using HTML and CSS. In the past, I used clickable divs, but it seems that may not have been the most effective approach. Should I consider using buttons or anchor tags instead? What ...

htmlcss

Ways to pass a message from index.html to a Vue.js 3 instance

Picture this scenario: You have a Vue index.html file that also loads a custom script: <!DOCTYPE html> <html lang="en"> <head> ... ... <script type="text/javascript"> languagePluginLoader.then(fun ...

javascripthtmlvue.jsvuexpyodide

Adding a numerical value to the conclusion of the php variable

It may seem like a basic question, but it has been bothering me for quite some time now... I have a PHP file that is included on a PHP web page to retrieve dynamic content from my MySQL database. Everything works smoothly with this setup except when I tr ...

phphtml

Initiate a fresh start with an automatic input reset

When you perform an action in the first id = "benodigheden", I believe there should be a specific outcome that then triggers a second rule for id = "benodigheden". However, I have been unsuccessful in finding information on this topic online. It seems like ...

javascriptphphtmlcss

Is the width set to fill the entire partial screen?

I'm facing a dilemma: I want the darkest-gray bar at the bottom right (visible after running the code below) to stretch as far as the browser window allows without encroaching on the light-gray section on the left. Here's the code snippet: <d ...

csswidth

Incorporate a caret into an element using CSS styling

issue I encountered an issue where <textarea> and Javascript had some quirks when trying to transfer the value into a <pre> tag. My aim was to implement a blinking caret in the <pre> as if I were pressing F7. The reason behind not using ...

htmlcsscaret

Tips for displaying specific HTML elements in AngularJS using ng-repeat and ng-if

I am working with some bootstrap HTML code that includes an ng-repeat function. <div class="row"> <div class="col-lg-4" ng-repeat="p in persons"> <img class="img-circle" src="images/{{ p.image }}" width="140" height="140"> < ...

javascripthtmlangularjsangularjs-ng-repeat

Formatting HTML Output Using PHP

Looking to format html output sourced from a database using php and facing an issue: Desired Format: ... <li> <div class="row-wrapper"> <div class="some-class-1">ARRAY-ELEMENT-1</div> <div class="some-class-1" ...

phphtmlarrays

Having trouble loading styles in Vue after publishing to npm

I'm currently using vue-cli3 for the npm publication of a Vue component. Below are my build scripts: "package-build": "eclint fix && vue-cli-service build --target lib --name @xchat-component/chat-component ./src/index.ts & ...

cssvue.jsnpmwebpackvue-cli

Is it possible to set spacing between the rows of an HTML table without also setting spacing for the columns?

Is there a way to add spacing between the rows of a table without affecting the columns? ...

htmlcsscss-tables

Clicking on a hyperlink within an Angular Material button does not prompt the browser to navigate to the linked page

Currently, I am utilizing Angular Material with AngularJS v1. Encountering issues with a simplistic menu bar while utilizing angular material. Below is the piece of HTML code representing the menu bar: <md-toolbar layout="row" class="md-whiteframe-z3" ...

htmlangularjsbuttonangular-material

Creating uniform image heights using Flexbox

My webpage features a library of books, with each book displayed in rows within a flexbox container. Each book is represented as a separate block consisting of a heading (the book's name) and an image of the book cover directly below it. I'm curr ...

htmlcssflexbox

Customize Bootstrap to change the hover color of a button

I'm currently working on customizing the style of my buttons so that when hovered over, they become a lighter shade instead of a darker one. I've explored the Bootstrap customization page (http://getbootstrap.com/customize/), but unfortunately, t ...

htmlcssresponsive-designtwitter-bootstrap-3