Having trouble getting the header div to span the entire screen

I'm currently working on a project where I have set the header div to 100% width and the main container to also be 100% width. However, I am facing an issue where the right and left sides of the header are not filling the entire space. I managed to fix the top alignment issue by applying negative margin, but I'm looking for a different solution for the left and right sides.

Can someone please provide assistance with this? Below is the CSS and HTML code:

@font-face{
  font-family:'Junction';
  src:url('junction/Junction-webfont.eot');
  src:url('junction/Junction-webfont.eot?iefix') format('eot'),
  url('junction/Junction-webfont.woff') format('woff'),
  url('junction/Junction-webfont.ttf') format('truetype'),
  url('junction/Junction-webfont.svg#webfont') format('svg');
}

#main {
  width: 100%;
  padding: 0;
}

h1 {
  font-size: 2em;
  padding: 1.7%;
}

#header {
  min-width: 100%;
  background-color: #FF6978;
  display: block;
  font-family: Junction, "Times New Roman", sans-serif;
  width: 100%;
  margin-top: -1.6%;
}
<!doctype html>
<html lang="en>

<head>
  <title>Check</title>
  <meta charset="UTF-8">
  <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="main">
    <!--open main div-->
    <div id="header">
      <h1>Checking</h1>
    </div>
    <!--close header-->
  </div>
  <!--close main-->
</body>

</html>

Note: I have used the Junction embedded font, which is not available online. I am not looking to increase the width to 120% or use a negative left margin. Please suggest an alternate solution.

Thank you for your help, Arthrax

htmlcssheightwidth

Answer №1

To ensure a clean slate for styling, it is important to remove default margins from the body and other elements. While using a 'universal' reset is a good start, implementing a proper Reset CSS is the optimal solution.

* {
  margin:0;
  padding:0;
  }


@font-face{ font-family:'Junction';
 src:url('junction/Junction-webfont.eot');
 src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');

}

* {
  margin:0;
  padding:0;
  }

#main {
  width: 100%;
  padding: 0;
}
h1 {
  font-size: 2em;
  padding: 1.7%;
}
#header {
  min-width: 100%;
  background-color: #FF6978;
  display: block;
  font-family: Junction, "Times New Roman", sans-serif;
  width: 100%;
  margin-top: -1.6%;
}
<!doctype html>
<html lang="en">

<head>
  <title>Check</title>
  <meta charset="UTF-8">
  <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="main">
    <!--open main div-->
    <div id="header">
      <h1>Chekcking</h1>
    </div>
    <!--close header-->
  </div>
  <!--close main-->
</body>

</html>

Answer №3

By default, most browsers add a margin of 8px to all sides of the <body> element. This can cause your #header DIV to be pushed down due to the margins on your <h1>. Additionally, the margin on the #header can create unwanted white space between this DIV and the one below it.

body,
#header h1 {
    margin: 0;
}

Answer №4

To make adjustments, simply include the margin property in the body element and set its value to 0.

@font-face{ font-family:'Junction';
 src:url('junction/Junction-webfont.eot');
 src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');

}
body {
  margin: 0;
}
#main {
  width: 100%;
  padding: 0;
}
h1 {
  font-size: 2em;
  padding: 1.7%;
}
#header {
  min-width: 100%;
  background-color: #FF6978;
  display: block;
  font-family: Junction, "Times New Roman", sans-serif;
  width: 100%;
  margin-top: -1.6%;
}
<!doctype html>
<html lang="en>

<head>
  <title>Adjustments</title>
  <meta charset="UTF-8>
  <link href="styles.css" rel="stylesheet" type="text/css>
</head>

<body>
  <div id="main">
    <!--open main div-->
    <div id="header">
      <h1>Adjustments Made</h1>
    </div>
    <!--close header-->
  </div>
  <!--close main-->
</body>

</html>

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

Is it Possible to Customize the Font Color of the Bootstrap Disabled Class in Bootstrap 4?

I am currently using version 4.4.1 of the Bootstrap gem for my Rails application which includes a Bootstrap 4 navbar. Below is a snippet from my navbar code: <ul class="navbar-nav ml-auto"> <!-- Hidden li included to remove active class fro ...

htmlcssruby-on-railsbootstrap-4disabled-input

The pull-right feature in Bootstrap 4 seems to be malfunctioning when used in a

Currently, I am utilizing bootstrap 4 for my project. I have encountered an issue with the navbar not aligning correctly on the page, and I'm struggling to identify the root cause of this problem. Is there someone who can provide assistance in resolvi ...

htmlcssbootstrap-4

Responsive Bootstrap 5+ carousel featuring cards tailored to different viewport sizes

After an extensive search, I have come across numerous outdated questions and answers regarding my issue. With Bootstrap continuously evolving, I am hoping someone can help me with my specific requirement. I am in need of a carousel of cards that adjusts ...

htmlcsstwitter-bootstrapbootstrap-5

Adjustable Greybox Overlay Resizes Window Dimensions

Utilizing greybox on my business website allows users to easily log in and access their accounts. View an example of my site However, when the login or sign up window is activated at the top of the page, the page or window size changes, causing scroll bar ...

cssajaxscrollbaroverlaygreybox

Tips on adjusting a standard CSS layout with JavaScript and jQuery to generate a unique ID for the updated style

My CSS contains IDs that look like this: <style> .HIDE-DISPLAY-k { background-color: orange; position: fixed; width: 100%; height: 100%; top: 10px; bottom: 0px; left: 10px; right: 0px; overflow: hidden; } #SHOW- ...

javascriptjqueryhtmlcss

Tips for displaying span value within asp.net web pages

I have an HTML code snippet that looks like this: <tr> <td> <span>Full Name:&nbsp;</span> </td> <td> <span id="FullName_PDLabel"><b>--</b></span> </td> & ...

htmlasp.net

Errors can be thrown when using React and classNames in the class component

I'm relatively new to React and currently working on a large project. I've run into an issue where I can't use both class and className on all elements and components, particularly custom ones. To work around this, I've had to place the ...

htmlcssreactjsjsx

Utilizing jQuery's .clone() function to duplicate HTML forms with radio buttons will maintain the radio events specific to each cloned element

I'm currently developing front-end forms using Bootstrap, jQuery, HTML, and a Django backend. In one part of the form, users need to input "Software" information and then have the option to upload the software file or provide a URL link to their hoste ...

javascriptjqueryhtmltwitter-bootstrapclone

Adding Tooltips to Your Bootstrap 5 Floating Labels Form: A Step-by-Step Guide

Can you include tooltips or popovers in Bootstrap 5 floating labels text? I've set up a form with floating form fields and I'd like to provide instructions for certain fields using tooltips or popovers. I can make it work with the standard form ...

javascripthtmlformsbootstrap-5

Ways to adjust the dimensions of a textarea based on character count

When attempting to utilize the cols and rows attributes of the <textarea> element in order to set the width and height in characters, I have encountered issues even without implementing CSS. Take a look at this example: link I have configured a 5x5 ...

htmlcsstextarea

What is the best way to allow text input in a table cell to exceed the confines of the table when it is clicked on

I am currently working on a table that has three columns: a label, a dropdown selector, and an input field. The challenge I'm facing is that the input field needs to accommodate multiple lines of content, specifically in JSON format. However, I want ...

htmlcsstwitter-bootstrap

What happens when there is a 1-second delay in loading CSS on an HTML page?

Lately, I've been working on creating HTML and CSS pages. However, whenever I load a page, I notice that there's always a brief half-second flash of the HTML content without any styling applied. Does anyone have an idea why this is happening and ...

htmlcss

Looking at a web page within another web page by utilizing XMLHttpRequest

Recently, I created a web app featuring a preview window that displays the content of an HTML page. To keep up with the constant updates to the HTML page, I have set the preview window to refresh every 0.5 seconds. Although the functionality works correct ...

javascriptjqueryhtmlajaxxmlhttprequest

The website code lacks a dynamically generated <div> element

When using jQuery to dynamically add content to a "div" element, the content is visible in the DOM but not in the view page source. For example: <div id="pdf"></div> $("#btn").click(function(){ $("#pdf").html("ffff"); }); How can I ensur ...

javascriptjqueryhtml

Managing the Response from Google Geocode API in a Vue JS Component

I am facing an interesting challenge. I have a scenario where users can choose between two options - using their current location or entering a zip code. When a user inputs a zip code, I need to make a call to the Google geocode API to retrieve the central ...

javascripthtmlvue.js

I would like the dropdown menu to only appear on mobile devices

After creating a dropdown menu, I now want it to only appear in mobile view and not in other views. I believe this can be achieved using "visible-xs" or a similar method, but I am struggling with the coding. Below is my HTML code: <nav class="navb ...

htmlcssbootstrap-4

The jsonGenerator is unable to process strings containing spaces

Hey, I'm having trouble passing a string with whitespaces to my JavaScript function using jsonGenerator. Here's the code snippet: jGenerator.writeStringField(cols[8], ap.getContentId() != null ? "<img src='img/active.png' onclick=au ...

javajavascripthtmljson

Top method for showcasing animated images (HTML/CSS/JS)

For my website, I want to create an engaging animation showing a coin being flipped multiple times in the air before landing on a specific side. After the animation finishes, I would like it to transform into a static image of the final result. I've ...

javascripthtmlcssimageanimation

Tips for eliminating the horizontal scroll bar within SweetAlert2's popup?

Here is the HTML code containing a date picker popup implemented using SweetAlert2: <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name=" ...

htmlcssbootstrap-5sweetalert2

Ordering tables in jQuery with both ascending and descending options

Trying to sort a table in ascending and descending order using jQuery? Here's the JavaScript code for it. However, encountering an error: Cannot read property 'localeCompare' of undefined If you can provide guidance on how to fix this so ...

javascriptjqueryhtmlcss