The art of positioning headers using CSS

Just a quick question:

I'm working on formatting my HTML and CSS, and I have the following code:

<div class="container">
  <div id="header">
   <div id="navbar">
   </div>
  </div>
</div>

This is how my CSS looks like:

.container {
    position: relative;
    text-align: left;
    width: 100%;
    background-color: yellow;
}

#header {
    position: relative;
    background-color: red;
    height: 120px;
    width: 960px;
    margin: auto;
}

Currently, my header (red container) stretches from left to right at 100% width. However, I want it to be centered within a specific width. Can anyone provide guidance on achieving this? Thank you in advance! =)

Answer №1

experiment with this css snippet

#main{ padding:0 10px;}

CodePen

Answer №2

If you're looking to center the div horizontally, you could try:

.container {
  display: flex;
  justify-content: center;
}

This will help align your content in the middle of the container.

Answer №3

There are two ways you can achieve this:

#header{margin:0 auto;}

Alternatively,

#header{position: absolute; left:50%; margin-left: -480px;}

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 favicon appears broken upon opening a new tab

Usually, I use a favicon PNG file for my website. It works perfectly and I can see my favicon on the browser tab. However, when I open a PDF document in a new page from my Angular app, I notice that there is a broken icon on the browser tab. Here is how I ...

Could an image displayed with {display: table-cell} be a potential issue?

I am exploring the use of CSS properties display: table-* to style a list of photos. The code below is intended to demonstrate this implementation, but there seems to be an issue with the table layout in Firefox and Safari as indicated by the borders appea ...

Implementing a NextJS button using the Link component

I am curious about how to incorporate a button inside a NextJS Link component. Usually, when you wrap the button in a Link and click on it, the onClick event is triggered and then it redirects to the value specified in the href attribute. Is there a way t ...

Is there a way to eliminate span tags from elements?

I need to replace all the span tags with the class "article" and add new span tags to the content <div class="asd"> <span class="location">Foo</span> <span class="article">bar</span> <span ...

The CSS in Django seems to be malfunctioning on various pages, particularly on header elements

My CSS file is linked in 'main/static/css/style.css' and my pages are located in 'main/templates/main/pages.html'. However, the CSS does not seem to be working properly for some pages; for example, the h2 tag is not taking on the specif ...

Designing a responsive two-column table layout

My current challenge involves a small table structured as a bullet list with two columns. To enhance mobile display, I am seeking a way to collapse it down to a single column: https://i.sstatic.net/LqbA6.png The current implementation includes the follow ...

Issue with utilizing addEventListener("load") in Firefox in conjunction with <iframe>

I've encountered an issue with my iframe when it is used as the target for a form. In all major browsers, except for Firefox, the iframe successfully removes the main element upon pressing the submit button. However, in Firefox, the main element is re ...

Div that adjusts according to the width of an image

I have some images of a laptop and a tablet displayed on my webpage. The issue I am facing is that the div above the laptop should always match the width of the laptop. Everything looks great at full width, but problems arise when I scale down the window s ...

Controlling HTML5 Video Playback with JavaScript: Pausing at Custom Frames

I need to implement a feature in my web application where I can pause an HTML5 video at specific frames using pure JavaScript, not based on minutes. <video id="media-video" controls> <source id="media-source" src="media/video.mp4" typ ...

Launching an external software using electron

I am in the process of developing my own personalized Electron app for managing other applications on my device. One issue I have encountered is the inability to create a link that opens my own .exe applications. I have attempted various methods without su ...

Enhanced jQuery implementation for hiding elements

I encountered a peculiar issue where jQuery's .is(':hidden') function wrongly returned true for an element that visibly displayed content. You can see the problem demonstrated in this fiddle. The :hidden pseudo checks both offsetWidth and o ...

Is there a way to shift the map to the right side without disrupting the text placement?

please provide image description Here is the code snippet: <div class="row w-100"> <div class="col-lg-6 my-4 offset-lg-1"> <iframe src="#" width="600" height=&q ...

The entire image is unable to be shown within the div

When adding images to a carousel, I encountered an issue where only the top half of the image is displayed on the page. It seems that the image is not adjusting itself to fit the div container properly, resulting in only a portion of it being visible behin ...

Incorporate a dynamic PowerPoint presentation directly onto my website

In my situation, on the client side, users can select image files (jpg|png|gif), PDF files, and PPT files which are then stored in a database. When viewing these selected files in the admin panel, I am using conditional statements to display them appropr ...

Exploring the functionality of v-chips within a v-text-field

I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a work ...

Adjust the color of text in an input field as you type (css)

I am trying to customize the appearance of my search box by making the text color white. However, even after changing the placeholder color and text color to white in my CSS code, the text color only changes to white when the user clicks out of the form. W ...

Displaying or concealing fields through Javascript depending on the category type of the results item

I am facing an issue with displaying certain fields in each individual property search result based on the property type. For example, if a property is classified as Land, I do not want the bedrooms and bathrooms fields to be visible, but if it is a Villa, ...

What causes the presence of a boundary around the svg?

I have been encountering an issue while attempting to incorporate my logo into the header of my webpage. Specifically, when viewed on smaller screens, I noticed that there is a margin surrounding the SVG image. Below is my HTML file: <html lang="e ...

Carousel issue with sliding on Bootstrap when deployed on various web servers

I am experiencing a strange issue with my website. I have it installed on two different servers, and while the Carousel works perfectly fine on the first server, it does not slide properly on the second server. Here are the links to each version of the we ...

What could be causing my page width to only expand to 100% when using "fit-content"?

After searching extensively, I'm unable to find a solution that fits my current issue. My goal is to construct a practice ecommerce website using React. One of the components I have is a header which I'd like to occupy 100% of the screen width, c ...