Incorrect placement of navigation in HTML/CSS dimensions

I'm working on my new portfolio and I've run into an issue with the navigation placement that I can't seem to solve.

The text should be aligned with the lines on the sides, but instead it's shifted right and down. I'm struggling to figure out why this is happening.

Here is the relevant code snippet:

body {
  padding: 0px;
  margin: 0px;
  background:url('images/Background.png');
  font-family: century gothic;
}

#nav a {
  text-decoration: none;
  color: white;
}

#container {
  margin: 0 auto;
  width: 960px;
}

#logo {
  background:url('images/Logo.png');
  height: 340px;
  width: 524px;
  float: left;
  margin-left: 0px;  <!--check-->
}

#nav {
  background:url('images/Nav_Container.png');
  width: 427px;
  height: 33px;
  float: right;
  margin-top: 100px;
  padding: 0px;

}

#main_nav li {
  list-style: none;
  display: inline;
  font: 18px century gothic, sans-serif;
  color: white;
  margin-right: 18px;
  padding: 0px;
}
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <title>MozazDesign Portfolio</title>
  </head>

  <body>

    <div id="container">
      <div id="header">
        <div id="logo">

        </div><!--end logo-->

        <div id="nav">
          <ul id="main_nav">
            <li><a href="#">home</a></li>
            <li><a href="#">about me</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">contact</a></li>
          </ul><!--end main nav-->
        </div><!--end nav-->
      </div><!--end header-->
    </div>
  </body>
</html>

Answer №1

When the margin-right is decreased by 17px, what effects does it have?

In my opinion, reducing the margin-right on the final element would be beneficial.

Answer №2

To achieve the desired text positioning, consider reducing the "font-size: 18px;" and/or "margin-right: 17px;".

[revision] Additionally, experiment with adding

#main_navigation { float: left; }

for improved link placement control. [revision]

Answer №3

If you are experiencing default padding/margins on your ul and li elements, you can reset everything in your CSS and gradually add styles back to troubleshoot:

#main_nav,
#main_nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#main_nav li { 
    display: inline;
    margin-right: 17px; /* Try adjusting this value if the layout is breaking */
    font: 18px century gothic, sans-serif; /* Provide a fallback font similar to century gothic */
    color: white;        
}

Answer №4

Instead of using margin-right, consider incorporating invisible spacers into your code:

  <div id="nav">
   <ul id="main_nav">
    <li><a href="#">home</a></li>
    <li>&nbsp;</li>
    <li><a href="#">about me</a></li>
    <li>&nbsp;</li>
    <li><a href="#">gallery</a></li>
    <li>&nbsp;</li>
    <li><a href="#">blog</a></li>
    <li>&nbsp;</li>
    <li><a href="#">contact</a></li>
   </ul><!--end main nav-->
  </div><!--end nav-->

This method prevents unnecessary space from accumulating at the end of elements. You can assign classnames to the spacers and adjust their size accordingly until they create the desired spacing.

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 jQuery animate() method fails to execute animations

I'm currently working on a JavaScript animation project and I've run into some roadblocks. One particular issue I'm facing is with animating the <label>'s margin-top, as it's not behaving as expected. For example: $(' ...

What is causing gog.com to malfunction when accessed through chromedriver?

Can you figure out why the appearance of gog.com differs between Google Chrome (left) and Chromedriver (right)? It's noticeable that things appear distorted and broken in Chromedriver. Even after comparing the two HTML codes, no significant differenc ...

Issue with BeautifulSoup(page.content,'html.parser') not returning accurate content during web scraping

While attempting to scrape data from the AJIO website, I encountered an issue where the content retrieved by Python did not match what I saw when inspecting the exact webpage. It appears that there is some JavaScript code present on the page which dynamica ...

Even after setting the handler to return false, Angular continues to submit the form

In the following scenario, I have encountered an issue: Here is the HTML template snippet: <form [action]='endpoint' method="post" target="my_iframe" #confirmForm (ngSubmit)="submitConfirmation()"> <button type="submit" (click)="conf ...

Ensure that a span within a cell table has a height of 100%

Is there a way to have the span element expand to full height? Click here <table class="table table-condensed table-hover table-striped"> <thead> <tr> <th class="shrink"></th> <th class ...

Using Puppeteer to Retrieve Data from a Web Page with Multiple Divs of the Same Class

I am in the process of creating a puppeteer script to scrape an announcements website. The challenge I am facing is how to extract the content of each page element with the same class using a loop. Upon inspecting the DOM, it's evident that all the co ...

The functionality of ellipsis, which consists of three dots, allows the text to expand

I am trying to implement a feature where the extra text is represented by three dots (...) as an ellipsis, and upon clicking the dots, the text should expand and contract. However, the current code only contracts the text and does not expand it upon clicki ...

Learn how to prevent two-finger swipe forward/backward on a trackpad using JavaScript or HTML

My app includes a functionality where the URL changes when transitioning from one state to another, for example from home/#state to home/#state2. However, I noticed that when I perform a two-finger swipe using the trackpad from home/#state2, the page navig ...

The presence of an image within an HTML anchor is causing an unexpected artifact to

Currently, I am working on a simple header design, but there seems to be a strange issue with the anchors containing image tags. The problem can be seen in the screenshot below: Image Link Here is the HTML structure: <div class="block-content"> ...

I recently implemented a delete function in my code that successfully removes a row, but now I am looking to also delete the corresponding data from localStorage in JavaScript

I have successfully implemented a delete function in JavaScript that deletes rows, but I also want to remove the data from local storage. This way, when a user reloads the page, the deleted row will not appear. The goal is to delete the data from local s ...

Images in gallery slider are excessively large

Hello, this is my very first post on stackoverflow. Please forgive any atypical elements in this post. I have a Django Website with a gallery slider, but I am facing an issue where the images appear way too big. You can view them here: I have dedicated n ...

Achieve full height for the span tag within a div using CSS styling

I am facing a particular scenario: In a bootstrap row with 2 columns: - the first column contains a table with a button to add new rows - the second column has a label and a span (although it doesn't have to be a span) Both columns have equal hei ...

Concealing scroll bars while still maintaining the ability to scroll by using overflow:scroll

Similar Question: How to hide the scrollbar while still allowing scrolling with mouse and keyboard I have created a sidebar for a web application that needs to enable users to scroll through it without displaying a scrollbar. The content is 500px high ...

The entire title serves as a hyperlink, not just the text portion

Apologies if I'm making mistakes, I'm just starting out with coding and navigating this website. So here's the deal: I am trying to add advertisements to my website on the left and right sides of the centered "Logo" at the top. The issue i ...

There seems to be an issue with the integration of Bootstrap in my JavaScript file

Is there a way to ensure that each new data entry in the array appears next to each other rather than stacking beneath one another? This is a JavaScript file with HTML written in Bootstrap format. const collegeData = [{ name: "University of Penn ...

Eliminating duplicate data submissions with jQuery Ajax

Encountering an issue with my jQuery AJAX submission process. JavaScript: $('#myform').submit(function () { if (validateEvenInputs()) { $('#btnevent').attr('disabled', 'disabled'); function ...

Tips for aligning the dialog box in the center of the screen based on the current scroll position

Is there a way to center the dialog box vertically at the current scroll position of the window when any of the "show dialog" buttons are clicked? For instance, if I click on location 3, I want the dialog box to be centered vertically within the current v ...

If the text is too lengthy, enclose it within a div element

I am facing an issue with a fixed width DIV of 300px. Within this DIV, I have dynamic text that sometimes exceeds the width and gets cut off. Is there a way to make the text wrap when it exceeds the 300px limit without increasing the height of the DIV? Is ...

Switching from a vertical to horizontal tab layout in Angular 4 Material 2 using MD-Gridlist

I'm currently trying to modify the tabbing functionality within an MD-Gridlist so that it tabs horizontally instead of vertically. I've experimented with tab indexes but haven't had any success. My goal is to enable horizontal tabbing throug ...

How do you specifically apply an Inset Border Shadow to just two sides using CSS?

Is it possible to apply the inner shadow specifically to the bottom and right sides? I've come across some hacks, but they seem to be more focused on regular border shadows. It's easier to add a drop shadow than to remove an inner shadow. -moz-b ...