Header is not extending to the full width or top of the body

Seeking help with an issue I'm encountering - my header isn't filling the top, left, and right portions of the screen, leaving a bit of space in those areas. Despite setting padding and margins for the elements inside the header, adjusting the header size hasn't solved the problem. Any suggestions on what might be causing this?

Thanks!

Code snippet:

<body>
    <header>
        <a href="index.html" id="logo">
        <img src="img/logo.png">
        </a>
</body>

CSS:

*{
    box-sizing: border-box;
}

body{

    font-family: 'Open Sans', Tahoma, sans-serif;
    max-width: 100%;
    background-color: #5F5E5E;
}

/***************
HEADING
****************/

 header{
  float: left;
  margin: 0 0 15px 0;
  padding: 5px 0 -60px 0;
  min-width: 100%;
  width: 100%;
   }

#logo {
 margin: 5px 0 0 70px;
 padding-top: 7px;
 padding-left: 50px;
 display: inline-block;
 max-width: 100%;
}

Answer №1

To correct the default margins behavior in browsers, it is necessary to reset them:

*{
    margin: 0;
}

View DEMO

Remember: It should be box-sizing instead of boz-sizing ;)

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

Tips for resolving the issue of a Bootstrap dropdown menu overlapping content in its vicinity

I am trying to position a Bootstrap dropdown button on the right-hand side of the page. The dropdown should cover 100% of the page's width and overlay any content when activated. However, there is a large logo on the left-hand side that I want users t ...

Troubleshooting image overlay alignment concerns

My script successfully adds the image src to the overlay's image, but I encounter a problem when creating the variable imgH for the margin-top value. It calculates the image's height and divides it in half. The issue arises when the calculated h ...

Customizing CSS for AGM Info Windows

After creating an agm-info-window with an image and a small text (tittle), here is the code: <agm-marker [latitude]="lat3" [longitude]="lng3" [iconUrl]="icon"> <agm-info-window [disableAutoPan]="true" [isOpen]="true"> <div route ...

Align two spans vertically in a div using Bootstrap

Struggling to create a left-hand side navigation card with Bootstrap and Bootstrap icons. The goal is to have the page name on the left and an icon on the right, but vertical alignment is posing a challenge. Take a look at the code snippet below: <b-li ...

A slew of problems arises from this horizontal list

Honestly, I've been struggling with this problem for hours - the submenu just won't style properly, and no matter how many lists I compare it to, I can't seem to get it right. The website: - you have to click "enter" to see the list, my ap ...

Using a single AJAX function to write on various tags

Information regarding the likes and dislikes count is retrieved from the server using an ajax function with the following queries: $q3="select count(value) as a from rank where personID='$person' and itemID='$itemID' and value>0 ...

Using URL parameters in Node.js applications

I am encountering an issue with my nodejs setup, and I am hoping someone can assist me. My challenge lies in trying to pass a parameter with a specific value to a page.html file, like this: page.html?s=1 However, I am encountering a problem where the pa ...

Align the icon and text both vertically and horizontally in the center

I have a collection of links: <ul> <li><a href="#" class="icon26 icon1">Link 1</a></li> <li><a class="icon26 icon2">Link 2</a></li> </ul> Each link comes with an icon. My ...

Widget for navigating through Youtube videos

I am currently working on creating a widget that allows users to navigate a YouTube video using buttons. For instance, if the video is of a car race, there would be buttons labeled Lap 1, Lap 2, and so forth. My idea involves adding an extension to the vi ...

Issues with Font Awesome fonts failing to load after compiling an Angular project using `ng build`

I've encountered an issue with Angular 8 and Font Awesome icons. I initially added the font-awesome path in the angular.json as follows: "./node_modules/font-awesome/css/font-awesome.css" However, all the icons were displaying as empty boxes (not lo ...

Failure to transfer form input values to PHP script

Currently, I am developing an email form that utilizes AJAX to connect to an external PHP file using PHPMailer for sending emails. In the beginning of the PHP file, I have the following code: if(count($_POST) > 0){ $message= 'Full Name: & ...

Tips for preserving the accuracy of data stored in database tables

I need to preserve the character /r/n in the "history" data and ensure it is not excluded when displayed in the HTML. function fetchData($studentId) { return DB::table('tbl_siswa') ->join('tbl_mapel', 'tbl_siswa.id_m ...

Struggling to adapt container rows into columns for optimal responsiveness

https://i.sstatic.net/uxGVK.png My current project involves creating responsive HTML code for the image above. Below is the code I have developed so far to achieve the desired design: HTML: <div class="container-fluid"> <div ...

Issue with ng-cloak not resolving flicker on button in Chromium; strangely, ng-cloak CSS doesn't apply as expected

Here is a snippet of my HTML code: <button type="button" class="btn btn-primary ng-cloak" ng-click="ctrl.add(ctrl.userProfile.username)" ng-hide="ctrl.userProfile.added">Add</button> The code above is a part of the larger HTML document shown ...

Ways to conceal buttons according to your 'occupation'?

I am currently developing an application and I would like to have certain buttons displayed based on the user's $job. There are four job roles stored in mysql databases: student teacher staff principal, The signup button should only be visible to te ...

What is the best way to constrain the ratio of a full-width image display?

I am in need of a solution for displaying an image at full width inside a frame with a 16:9 aspect ratio. The image needs to be centered within the frame and adjust responsively when resizing the screen. My preference is to achieve this using just CSS. ...

A guide on implementing Mail Merge Template files in PHP

I am new to mail merge and I'm not sure if it's even possible. I have created a template in mail merge, but I don't know how to use PHP to send emails to a list of clients like an RSS feed. Can someone confirm if this is feasible and provide ...

Do CSS Modules consistently generate the same class name for a specific CSS class defined within the module?

I have defined the following classes in my CSS module: .container-styles { height: 20px; width: 90%; background-color: rgb(128 , 128 , 128); } .filler-styles { height: 100%; border-radius: inherit; background-color: rgb(27, 150, 40); text-al ...

Saving sortable portlet items to a database using JQuery AJAX

I've searched through numerous resources to find a solution to my problem, but none of them have been successful. Here is the code I am working with: http://plnkr.co/edit/pcfz33lzHz4wdehjGEuQ I am trying to utilize AJAX to save the order of two port ...

What methods can be used to clear cache files each time a visitor views my website using the Safari browser on an iOS device?

As a newcomer to Web Development, I recently created a simple website from scratch without relying on any frameworks. I made sure to prioritize "Responsive Web Design" in order to ensure that my site was mobile-friendly. During the testing phase, I checked ...