Complete the TopBar all the way to the edge of the display

Can someone help me with my navbar issue? I created a topbar with register and login buttons, but it's not filling up the entire screen. It stops just before touching the edge of the monitor. Any suggestions on how to fix this? Here is the link if you want to see my code.

html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>League of Legion</title>
    <link rel="stylesheet" type="text/css" href="page.css" />
</head>
<body>
<div id="top-background">
        <div id="wrapper">
            <!-- Everything in the top Nav -->
            <div id="Register-Text">
                <ul>
                    <li><p>Don't have an account?</p> <a href="#">Register</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
            <!-- End of everything in the top Nav -->
        </div>
    </div>
</body>
</html>

css

#top-background {
    background-color: #000000;
    margin-top: -9px;
    position: relative;
}

#wrapper {
    background-color: #000000f;
    max-width: 1100px;
    min-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -16px;
}

/*Beginning of top Nav styling */
#Register-Text {
    overflow: auto;
}

#Register-Text ul li {
    color: white;
    display: inline;
    list-style-type: none;
    float: right;
    padding-left: 20px;
    margin-bottom: 10px;
}

#Register-Text ul li p {
    display: inline;
    color: #999;
}

#Register-Text ul li a {
    color: white;
    text-decoration: none;
}

#Register-Text ul li a:hover {
    color: #93C;
}
/* End of top Nav Styling */

Answer №1

To achieve this, use the following code snippet:

body {
    padding: 0;
    margin: 0;
}

I always include a CSS reset in my projects to standardize default styles across different browsers. You can find Eric Meyer's CSS reset at . It works well for me.

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

One way to represent the carriage return character ( ) as text in HTML is by using a JavaScript function to create a

I have encountered a situation in which I need to display \r at the end of a string within a JavaScript function, but unfortunately it is not being displayed. <html> <body> <p>Click the button to create a PRE element.</p> < ...

Aligning the column to the right to ensure the text is centered horizontally on the screen

<div className={css.title} > <div className={css.row}> <div className={css.columnLeft}> <div className={css.header}>Images</div> </div> <div className={css.col ...

The tailwind fill attribute is not being utilized

When working with SVGs and tailwind, I tried using a fill-primary on one of the instances, but for some reason my SVG remains black. <svg width="9622" height="127" viewBox="0 0 9622 127" fill="none" xmlns="ht ...

Space between Logo Header and Navigation Bar

Recently, I attempted to create a new header with a responsive logo and menu. After seeking guidance from StackOverflow experts, everything seems to be functioning correctly now. However, I am facing an issue regarding the gap between the header and navba ...

Can the submit ID value be utilized in PHP?

name="submit" functions as expected. if(isset($_POST["submit"])) <input type="submit" ID="asdf" name="submit" value="Save" class="ui blue mini button"> I want to change it to use ...

"Selecting options from a range - Bootstrap multiple

Currently, I am in the process of implementing a multiple-choice tick box for PHP. The code I have so far is as follows: <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="inp ...

Scroll the menu to the div smoothly without any animation

My onepage website features menu points that smoothly scroll to a specific div upon click. Although the functionality is working correctly, I have added a jQuery function for animation which seems to be malfunctioning. Below is the HTML code: <div c ...

The navigation bar's HTML hue

Currently working on a website design and looking to replicate the unique color gradient effect seen in the top navigation bar of Virgin America airlines' website (refer to the image linked below). Interested in any CSS/HTML techniques that could help ...

Assigning the variable "name" attribute to an <input> element in HTML: A step-by-step guide

In the image below, I am working on creating a user interface using JSP and loops. I am looking to assign unique names to each input element to differentiate them. To achieve this, I plan to give them variable name attributes which I can set and populate ...

Is it possible to create an input field exclusively for tags using only CSS?

I am currently facing some limitations with a website I am managing. Unfortunately, I do not have the ability to incorporate additional libraries such as custom jQuery or JavaScript scripts. My goal is to customize an input field for tags so that when us ...

How to position an element to the right in Bootstrap 4 without causing it to move to a new line immediately?

As a newcomer to Bootstrap, I have come across only one individual who has raised this issue before. Unfortunately, they did not receive a satisfactory solution, prompting me to bring up the question once more. My dilemma involves two button groups. When ...

Navigate to the top of the page using jQuery

Attempting to implement a simple "scroll jump to target" functionality. I've managed to set it up for all parts except the "scroll to top". The jumping works based on the tag's id, so it navigates well everywhere else, but not to the very top. He ...

Show form using inline HTML styling

Can someone help me with this issue? I attempted to add in-line forms for "subject" and "email," but it did not work as expected. How can I resolve this problem? I am using Wordpress and the CForm Builder plugin. Thank you in advance for any assistance! ...

Is it possible to nest an HTML <span> inside a label tag in a Rails form_for?

Is it possible to nest a span element inside a form_for label tag? I am trying to achieve this in order to style a specific part of the label using CSS, such as making the text red. While it seems like valid HTML based on my research, it is causing some is ...

Swapping out a character on a webpage using jQuery

Can someone help me remove the colon from this code snippet on my webpage? <h1><b>Headline:</b> something</h1> I'm looking for a simple solution using jQuery, as I am a beginner in JavaScript. Please include the complete code ...

"Can you provide instructions on placing a span within an image

I am trying to figure out how to insert a <span> into an <image>, similar to the effect on the page . However, I do not want this effect to occur on hover(), but rather on click(). My goal is to insert "data-title" into the <span> and hav ...

Javascript issue with unresponsive buttons

I've been experimenting with animations on a webpage, particularly with turning a circle into a carousel to display more information. I was inspired by CodingNepal's infinite carousel idea. Everything looks good except the buttons (i tag) are not ...

When you click anywhere on the page, JavaScript's method __dopostback is triggered

I'm encountering an issue in my asp.net application where I have an html table. Specifically, when a user clicks on a td element within the table, I use JavaScript to store the id of that td element in a hidden field. Afterwards, I trigger __dopostbac ...

Error: The argument passed to int() must be a string, bytes-like object, or number, not 'NoneType' (Issue when sending HTML input to Python)

#!C:\Users\aan\AppData\Local\Programs\Python\Python39\python.exe import numpy as np import skfuzzy as fuzz import cgi from skfuzzy import control as ctrl print("Content-type:text/html\r\n\r\n ...

The full-width header is generating a horizontal scrollbar

Why am I seeing horizontal scroll bars on Safari and Chrome when the header width is set to 100%? Here is the code snippet: window.onscroll = function() { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop > 400 || doc ...