CSS confusion: What's causing the header to not align horizontally and the footer to not justify evenly spaced?

I am new to coding and experimenting with CSS flexbox to design a responsive layout. I am struggling with aligning the header elements horizontally in the widest viewport and adjusting the footer to space out evenly.

For the header, I attempted using display:inline and text-align:center, but did not achieve the desired result. As for the footer, I tried display:flex and justify-content:space-evenly without success.

<html>
 <body>
  <header>
    <div class="logo">
       <h1>actual image logo here</h1>
       <h1>The ABC Company</h1>
    </div>
    </header>
  <footer>
    <ul class="social">
      <li class="social_icon">Twitter Logo here</li>
      <li class="social_icon">Facebook logo here</i></li>
      <li class="social_icon">Insta logo here</li>
    </ul>
  </footer>
 </body>
</html>
htmlcssalignment

Answer №1

nav {
  display: flex;
  justify-content: center;
  text-align: center;
}

.social-icons {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
}

If you want to utilize flexbox, make sure to include display: flex in your nav element to center it horizontally using justify-content: center. In the footer section, don't forget to apply display: flex to position its children evenly.

Check out this working example here

Answer №2

Consider implementing the following changes:

header {
    text-align: center;
}

.logo {
    display: inline-block;
}

.social {
    display: flex;
    justify-content: space-evenly;
}

Answer №3

For full screen width headers and footers, simply set the width to 100% like this:

header,footer {
    width:100%
}

To center align any element with ease, you can utilize flexbox as shown below:

header {
     background: #aaf;
     display: flex;
     justify-content: center;
   }

footer {
     background: #aff;
     display: flex;
     justify-content: center;
}

header div.logo {
       display: flex;
       justify-content: center;
}

footer ul.social {
      width : 100%;
      list-style: none;
      display: flex;
      justify-content: space-evenly;
    }

In order to center the content of child elements in Header and Footer (h1 and li), you need to use flex again. Adjusting the ul width allows space-evenly to look centered.
If you have any more queries, feel free to drop a comment.

body {
  background: rgb(36, 36, 33);
  margin: 0;
  padding: 0;
  height: 100vh;
}

   header,
   footer {
     width: 100%
   }

   header {
     background: #aaf;
     display: flex;
     justify-content: center;
   }

    footer {
     background: #aff;
     display: flex;
     justify-content: center;
    }

    header div.logo {
       display: flex;
       justify-content: center;
    }

     header div.logo > *{
       padding: 0 10px;
     }

    footer ul.social {
      width : 100%;
      list-style: none;
      display: flex;
      justify-content: space-evenly;
    }
<!Doctype HTML>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="style.css">
    <title></title>
</head>

<body>
  <header>
      <div class="logo">
          <h1>actual image logo here</h1>
          <h1>The ABC Company</h1>
      </div>
  </header>
  <footer>
      <ul class="social">
          <li class="social_icon">Twitter Logo here</li>
          <li class="social_icon">Facebook logo here</i></li>
          <li class="social_icon">Insta logo here</li>
      </ul>
  </footer>
</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

Bootstrap allows for the creation of five columns of equal width that span the full width of the container

My PSD template includes a CONTAINER with 5 equal width columns measuring 344px each. I initially opted for Bootstrap to handle responsiveness, but now I'm feeling overwhelmed by the task. Is there a way to tackle this issue, or should I: Revise my ...

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Checking the opacity with an if/else statement, then adding a class without removing the existing class

This function is designed to check the opacity of the header, which fades out as a user scrolls down. If the opacity is less than 1, it disables clickability by adding the class "headerclickoff". However, there seems to be an issue with removing the clas ...

javascriptjquerycss

What are some strategies to avoid render-blocking when CSS is loaded through HTML Imports?

I am in the process of developing a website using Web Components and Polymer, with assets being loaded through HTML Imports. This is an example of my markup: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> < ...

csspolymerweb-componentpagespeedhtml-imports

Issue with SVG animation causing unnecessary duplication of circle shapes when utilizing animateMotion

I have implemented animateMotion to create an animation along a path. Below is the code snippet that demonstrates this: <!DOCTYPE html> <html> <head> <title>Example Of Many Things!</title> </head> <body> ...

javascripthtmlsvg

Multiple jQuery AJAX requests triggered in a click event handler

I am in the process of developing a PHP web application and utilizing the datatables jQuery plugin along with jQuery AJAX calls to create a dynamic table for editing, deleting, and adding elements. Although it appears to be working correctly, I've not ...

javascriptphphtmljqueryajax

Disabling Scrolling in AngularJS Material Tab Components

I'm experimenting with AngularJS Material components and struggling with creating tabs. Every time I add a tab, the content inside the child md-content element automatically gets a fixed height with a vertical scrollbar instead of adjusting its heigh ...

javascripthtmlcssangularjs

Subdomain Dilemma: Trouble with Images in Internet Explorer

Currently, I am working on creating a basic website on a subdomain. Everything appears to be running smoothly in Google Chrome except for one issue with the header image not displaying in IE8. The image link is . It seems that the problem may stem from IE ...

htmlcssimageinternet-explorercross-browser

Canvas.js graph failing to refresh with updated data

I have encountered an issue while using CanvasJS to generate a line graph with data from Myo. The problem is that when new data is received, the graph fails to update. This may be due to the fact that I did not initially populate the graph with any data po ...

javascripthtmlgraphcanvasjsmyo

CORS blocked the JavaScript Image's request

I am encountering an issue with my code that involves capturing selected divs using the HTML2Canvas library. However, when I try to download the captured image file, it is not working as expected. The error message I keep receiving is "Access to Image at ...

javascripthtmlcorshtml2canvas

Combine two separate variables and insert them into a single cURL command line

I need to incorporate a random value from a variable into a cURL command. Additionally, I want the cURL command to execute a function using this random value. At the end of the function, I want to add a different value to the first one for completion and t ...

phphtmlvariablescurl

Tips on preventing a lone track in Laravel for Server Sent Events

In my Laravel app, I am exploring the use of Server Sent Events. The issue I have encountered is that SSE requires specifying a single URL, like this: var evtSource = new EventSource("sse.php"); However, I want to send events from various parts/controlle ...

javascriptphphtmllaravelserver-sent-events

Enhance Your Navbar in Bootstrap 3 by Creating Vertically Expanding Links Relative to Brand Image Dimensions

To best illustrate my issue, I will begin with a screenshot of the problem and then explain what I aim to achieve. Here is the current state of my navbar: Currently, the text of the links on the right side is positioned at the top. Additionally, this is h ...

htmlcsstwitter-bootstrap

Incorporate personalized design elements within the popup component of Material-UI's DataGrid Toolbar

I am in the process of customizing a Data Grid Toolbar component by making adjustments to the existing Grid Toolbar components sourced from Material-UI. For reference, you can view the official example of the Grid Toolbar components here. Upon clicking o ...

javascriptcssreactjsdatagridmaterial-ui

Preventing the submission of a form using jQuery until all input, radio, select, and checkbox fields are filled out

I currently have a form that includes various field types, all of which must be filled out before submission. The submit button is disabled by default and I am looking to enable it once all fields are completed. I came across examples of this feature work ...

javascriptjqueryhtmlformsvalidation

What is the best way to target CSS only to elements that do not have a parent with a specific class?

Striving to preserve the existing CSS in the codebase. .my-new-class { .existing-class { ...implementing new styles } } .existing-class { ...maintaining old styles } I attempted a technique that I know won't work and understand why: ...

csssassancestor

Is there a way to modify the hover border effect of a TextField in material-ui?

In Persian language, the text direction is set to rtl. I am looking for a way to adjust this input field to suit my language for the project. Please refer to the following image: Image Link I want to achieve something similar, but I am unsure how to ch ...

cssreactjsflexboxmaterial-uicss-selectors

Creating a custom backdrop for your kaboom.js webpage

I created a kaboom.js application and I'm having trouble setting a background for it. I've searched online extensively and attempted different methods on my own, but nothing seems to be working. (StackOverflow flagged my post as mostly code so I ...

javascripthtmlcsskaboom

How can we efficiently load a JSON file from a local path into an HTML document in a way that is compatible with all browsers?

I am attempting to retrieve JSON data from a local path and display it on a basic HTML page. I have tried various methods such as fetch, ajax in order to load the data and update the corresponding values on the web page. The goal is to host this page so t ...

javascriptjqueryhtmljsonajax

What could be causing the font of the background text to change when CSS3 animation is applied?

Have you ever noticed a font style change in the background text when applying CSS3 animations for opacity and scale transforms? I have some text content on my page, including a "Click me" link that triggers a popup with a CSS3 animation. However, I'v ...

jqueryhtmlcss

Using CSS alone, incorporate two images within a section in HTML5

Is there a way to add two images inside a section using CSS to make them look like this: https://i.sstatic.net/74JSK.png However, the only result I can achieve with CSS looks like this: https://i.sstatic.net/TWrSR.png I could use divs in HTML and add th ...

htmlcss