Ensure that the header logo is in perfect alignment with the body of the

I am facing an issue with the alignment of my header logo on a webpage. The body of the page has white space on each side, and I want the header logo to be aligned on the left so that it starts vertically at the same point as the body regardless of the window size. However, I'm struggling to achieve this because the body is centered with a percentage width, while the header logo is naturally in the middle position. Floating the logo to the left and adding margin or padding does not make it responsive for larger screens than my laptop.

Here is the CSS code for my container:

.td-container {
    width: 95%;
    max-width: 1350px;
    margin-right: auto;
    margin-left: auto;
}

For the header so far, I have tried:

.td-main-logo img {
    max-width: 1350px;
    margin-right: auto;
    margin-left: auto;
}

and:

.td-main-logo img {
    max-width: 1350px;
    margin-left: 6%;
}
csswordpress

Answer №1

There is a margin around the body tag that needs to be reset to remove white space.

To fix this issue, use the following CSS code:

body {margin:0}

Here are some tips:

  • margin-left:auto and margin-right:auto have the same effect as margin:auto
  • Consider using box-sizing:border-box with padding

View a live example here: http://codepen.io/anon/pen/oBMBax

(No additional information provided)

Answer №2

How about this? I've adjusted the width to 600px just for demonstration purposes (also changed the outline)

.td-main-logo,
.td-container {
    width: 95%;
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
}

.td-container,
.td-main-logo{
  outline: 1px solid red;
}
<div class="td-main-logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="100px">
</div>

<div class="td-container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt nihil consequuntur, quasi dicta officiis distinctio, aliquid soluta provident tempore magni temporibus autem, facilis voluptatum ab blanditiis fuga tempora vel tenetur officia voluptate. Quaerat dolor magnam, dolore sint id ducimus ea optio rem nobis doloremque quam animi quidem veritatis assumenda commodi, ratione aspernatur. Ad nemo eos at quis quos saepe numquam, tempora blanditiis minus, pariatur soluta unde dolorem aut beatae esse nam, accusamus dolore rerum quam necessitatibus aspernatur explicabo doloremque. Quae rem error quia facilis deleniti asperiores excepturi numquam illum quo. Eius cupiditate laudantium molestiae ex ipsam perspiciatis, nam! Beatae tempora iure aliquid accusamus illum, adipisci? Ducimus praesentium commodi, aspernatur debitis voluptate omnis nemo quia illo magnam quis voluptates, ullam laborum tenetur dolorum ut. Molestias ex quas ea, excepturi praesentium error, natus ut quaerat porro, tenetur dolorum eaque exercitationem hic officiis repellat est suscipit dolor dolore velit. Doloribus rerum porro deserunt.
</div>

`

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

Swapping out an image using CSS

Previously, the most common method for "removing" text from elements was through text-indent: -9999px, however, it is now recommended to use text-indent: 100%; white-space: nowrap; overflow: hidden; This way, the browser does not need to create a huge 9 ...

cssoverflowfont-sizetext-indent

The issue of AngularJS inline style color not functioning in Internet Explorer 11 has been identified

Hello, I am currently attempting to dynamically change the color of a p tag. However, I am facing issues with IE-11 not supporting this functionality. How can I resolve this problem? <p style="color:{{userData.color}} !important;">{{userData.someTex ...

htmlcssangularjsstylesinline

Navigating through each segment

I'm currently working on a website with sections that are set to be 100% height of the window, but at least 800px tall. My goal is to implement a smooth scrolling functionality where one scroll moves the view from section to section. However, if the ...

javascriptjqueryhtmlcss

Please explain the steps for creating a responsive grid layout

*{ margin: 0; margin-bottom: 200px; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } .grid-container { position:relative; display: inline-grid; grid-template-col ...

csscss-grid

Placing three div elements within a container, one of which has a height set to auto

I need help arranging 3 divs side by side using float:left. The height for two of the div's (child1 and child3) is fixed, but there is no set height for child2 - I would like child2 to have the same height as the container div. <div id="container ...

htmlcss

Creating an AngularJS directive specifically for a certain <div> tag

Recently, I began learning angularjs and came across a script to change the font size. However, this script ended up changing all <p> tags on the entire webpage. Is there a way to modify the font size of <p> tags only within the <div class=" ...

javascripthtmlcssangularjs

The presence of CSS rollovers on a scrollable div is causing overflow problems

Currently, I am developing an interface that involves a list of items inside a scrollable div. Some of these items have rollover menus that extend beyond the boundaries of the div when hovered over. It is crucial for the website to be compatible with disab ...

csshtmloverflowrollover

Where within Video.js can I modify the color of the large play button when the cursor hovers over the video?

After successfully changing the SCSS $primary-background-color to orange using the video.js default skin editor (CodePen), I encountered an issue. Whenever I hover my mouse cursor over the video, the big play button background reverts to its default grayis ...

javascriptcssvideohtml5-videovideo.js

Incorporate WordPress (PHP) Strings and variables into Svelte

My WooCommerce product configurator is custom-built and highly advanced. The current jQuery version is not performing well, it's slow, outdated, and lacks optimization. I am considering migrating to Svelte (although I am aware Vue is a simpler option ...

phpwordpressvue.jssvelte

Expand the size of the bullets in unordered lists

What is the best way to customize UL list bullets to have a larger width without using custom images? ...

htmlcssliststyleshtml-lists

For my Bootstrap website, it's a constant struggle to balance between having a responsive menu item and ensuring its correct visual appearance

I need help with creating a unique menu design for my website. On the desktop site, I want to display "username/password/sign in" buttons, while on the mobile responsive version I only want to show a single "sign in" option that redirects users to the sign ...

htmlcsstwitter-bootstrap

The Art of Personalizing a Banner

I am currently experiencing an issue with the width of a specific gadget. My goal is to have the border-bottom line of #customheader span the entire width of any screen size. However, at the moment, the border-bottom is only the width of the blog itself. H ...

htmlcssblogger

What is preventing images from displaying in my slider within baguetteBox?

Currently, I am in the process of incorporating a slider into my website using the baguetteBox library. After consulting the documentation, I successfully implemented an example that is functioning smoothly without any issues. In order to display a series ...

javascripthtmlcssreactjsslider

How can I use HTML/CSS to make text and images larger with the link tag, <a>?

I'm looking to add a feature on my website where users can hover over a picture or text that contains a link, and have the text or picture enlarge and become bigger. When the user stops hovering, I'd like the text or image to return to its origin ...

htmlcsshover

What is the method for initiating a radial gradient from the middle of the pie chart?

In my pie chart with grid lines, I have successfully implemented a radial gradient. However, the issue is that there is a separate gradient for each pie slice. What I really want is a single gradient originating from the center of the entire pie chart. I ...

javascriptcssd3.js

Tips for arranging images of varying heights on separate lines so they appear cohesive as a group

I've been working with masonry.js but I'm still not achieving the effect I want. Javascript:` var container = document.querySelector('#container'); var msnry = new Masonry( container, {columnWidth: 200, itemSelector: '.item' ...

htmlcssimage

Ways to position loading animation in the center and create a lightbox effect for the rest of the page

I have implemented a custom loader in CSS with the following styles: .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 80px; height: 80px; animation: spin 2s linear inf ...

javascripthtmlcssvue.js

What is causing the <a> elements not to align in the center of my <li> navigation items?

I'm in the process of building a website with a mobile-first approach. Right now, I'm focusing on styling the navigation bar, which consists of a ul containing five li elements and an a element within each li. In the mobile layout, my goal is to ...

htmlcsshtml-listscenteringnav

Is there a way to occupy the extra space while working with an inline unordered list?

Using this unique CSS code, I've managed to give my unordered lists a touch of elegance: ul, li { padding: 0px; margin-left: 0px; margin-bottom: 0px; display: inline; } li { border: solid 1px #333333; margin-right: 5px; padding: 2p ...

htmlcss

How can I adjust the width of a handle/thumb for NoUiSlider?

Looking to adjust the width of a NoUiSlider using CSS: .noUi-horizontal .noUi-handle { width:8px; height:25px; left: 0px; top: -8px; border: 0px solid #000000; border-radius: 0px; background: #000; cursor: default; box- ...

javascriptcssnouislider