What could be preventing the justify-content:space-between; from working properly?

I'm experiencing an issue where the items are staying to the left instead of spreading out properly on my website. Additionally, when using Google Icons, they won't display unless I include the base tag in the head section since the domain name isn't registered. Is this a common problem? I am using Microsoft Edge as my browser.

header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Brain Archive</title>
  <meta charset="UTF-8">
  <base href="https://www.brainarchive.com/">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="brain_archive.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e796c7f7a7e0c0e10100a06">[email protected]</a>,100..700,0..1,-50..200" />
</head>

<body>
  <header>
    <span>Brain Archive</span>
    <span>
        <span class="material-symbols-outlined">search</span>
    <span class="material-symbols-outlined">menu</span>
    </span>
  </header>
  <main>
  </main>
</body>

</html>

htmlcssflexboxmicrosoft-edge

Answer №1

Transform the Parent Element to a Div Tag.
 <header>
      <div>Brain Archive</div>
      <div>
        <span class="material-symbols-outlined">search</span>
        <span class="material-symbols-outlined">menu</span>
      </div>
    </header>

Answer №2

Works like a charm. The "Brain Archive" text is aligned to the left, while the icons are positioned on the right side.

header {
  display: flex; 
  justify-content: space-between;
  width: 100%;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44031605000476746a6a707c">[email protected]</a>,100..700,0..1,-50..200" />
    <header>
      <span>Brain Archive</span>
      <span>
        <span class="material-symbols-outlined">search</span>
        <span class="material-symbols-outlined">menu</span>
      </span>
    </header>

Answer №3

Here's a slight tweak to the solution shared by @BrettDonald - ensuring that the icons are evenly spaced out as well.

To achieve this, we can set the parent span element to display:contents, instructing flex to consider its children in alignment.

header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

header span:last-child {
  display: contents;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395c494a4f4b394734343e32">[email protected]</a>,100..700,0..1,-50..200" />
<header>
  <span>Mind Archive</span>
  <span>
        <span class="material-symbols-outlined">search</span>
  <span class="material-symbols-outlined">menu</span>
  </span>
</header>

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

Creating a clear, white overlay that separates an image from the content on a webpage

I am currently working on creating a background for OP.gif. The goal is to have a transparent white color covering the entire web page, and to have the input[type='text'] below that coverage also in transparent white color. This way, the end-user ...

javascripthtmlcss

Tips for reducing the height of the footer without compromising the alignment of the text within

My attempt to reduce the height of my footer in CSS using padding, margin, and other methods was unsuccessful. All of these adjustments either pushed the footer completely out of the bottom or left the text uncentered. footer { background: #fce138; wid ...

htmlcss

Learn how to use the CSS transform-scale() function to scale text independently from its container while maintaining proper alignment

I am currently working on adjusting font sizes to match another one, but I am facing an issue where the container's size is also being affected, resulting in misalignments. I have experimented with different display types (block, inline) and even trie ...

htmlcss

Click to refine list or view

Currently, I am engaged in creating my own version of a social media platform inspired by Twitter. In this project, tweets are being automatically generated from a JavaScript file. One key feature I'm working on is that when a user clicks on a usern ...

javascriptjqueryhtmldomview

CSS - borders are overlapping with one another

Encountering an issue where the bottom border is overlapping the right border on the same element. Here's a visual representation of the problem: The green right border's bottom is appearing distorted due to the presence of the gray border at t ...

htmlcss

A Guide to Overflowing Text Above Divs - Even When the Parent Div has a Width of 0%

My webpage, built with Bootstrap 4, features a row with three divs placed horizontally. The divs have different percentage widths and sometimes the center div's width is set to 0%. However, I need to ensure that the text within the 0% div is always v ...

cssflexboxbootstrap-4

When the font size is set below 16px on an iPhone, iOS will automatically zoom in to compensate

Currently, I am running tests on my app using an iPhone. Everything seems to be working correctly on the iPad, but when I try clicking on a text field on the iPhone, the view automatically zooms in. It appears that setting the font size to 16px or larger r ...

htmlcssreactjsiphonenext.js

What is the best method for retrieving data from a database using PHP?

Currently, I am dealing with a specific issue regarding reading an auto-incremented value and utilizing it in my database. Here is the structure of my database: mysql_query("INSERT INTO category (category,image) VALUES ('$name','$default_ite ...

phphtmlmysqldatabase

Is there a way to align the arrow on the pills to the right center of the lengthy text?

I am struggling to align a pill on the right side of a header with long text using CSS. I need the pill to be centered at the right area with multiple lines of text. Can someone guide me on how to achieve this? Any assistance is appreciated. .c-cta-box- ...

htmlcssbootstrap-4nav-pills

Utilizing Ruby interpolation to dynamically select elements in Capybara's CSS selectors

Having trouble with invalid selector errors when attempting to locate an element using capybara This method is successful: page.find("#widget_amount_Standard") But I encounter issues when trying any of the following: credit_type = "Standard" page.find( ...

cssrubycapybara

What steps can I take to ensure that the upper and left sections of a modal dialog remain accessible even when the size is reduced to the point of overflow?

One issue I'm facing is with a fixed-size modal dialog where part of the content gets cut off and becomes inaccessible when the window shrinks to cause an overflow. More specifically, when the window is narrowed horizontally, the left side is cut off ...

htmlcsstypescript

utilizing two input elements within a single form each serving a unique purpose

Hello everyone, I'm seeking assistance on how to code a form with two input element tags, each having different functions. Alas, the solutions provided in this source are not working for me. Here is the troublesome source PHP CODE: <?php $ser ...

html

Exploring the hover effect in CSS pseudo classes

I currently have a sub menu that consists of 4 headers. The code snippet provided below is used to style the first element in each column of the submenu. My next task is to create a hover effect for these elements, where the background color changes to gr ...

htmlcssclassselector

Regular expression that removes attributes from all HTML tags except <a>

$text = preg_replace("/<([a-z][a-z0-9]*)[^>]*?(\/?)>/i",'<$1$2>', $text); Greetings. I came across a preg_replace function that identifies all HTML tags and removes their attributes. However, I need to make an exception for t ...

phphtmlregexhtml-parsing

I am interested in creating a text box that has the ability to gather user input and connect it to a search

I have been attempting to develop a text box that can collect answers and link them with the search URL. However, I am encountering issues where even though I can input text into the textbox, it is not being recognized by the script. The error message sh ...

javascripthtml

Null values have been detected in the request.form elements

I am facing an issue with a simple asp.net webform. When I post it to another page, the request.form collection appears to be empty. I am unsure of what mistake I am making. Form: <form runat="server" id="myform" action="submitForm.aspx" method="post" ...

htmlasp.netforms

Click a button to show or hide text

I am attempting to create a button that will toggle text visibility from hidden using 'none' to visible using 'block'. I have tried the following code but unfortunately, it did not yield the desired outcome. <p id='demo' s ...

javascriptcsshtmldom-events

Tips for aligning hyperlinks in the navigation bar using CSS3 and HTML5

Struggling to center the links in the navigation bar has been a challenge. I really want those buttons smack dab in the middle of the header bar, but despite trying everything, they stubbornly remain on the left-hand side. .header { overflow: ...

htmlcssnavcentering

JavaScript application that features an audio player complete with a dynamic progress bar and customizable tags

Looking to create a custom audio player using HTML, CSS, and JS. The player should have basic functionality like a play button and progress bar. However, I want to allow users to add tags on the progress bar of the audio file, similar to how SoundCloud&apo ...

javascripthtmlcss

What is the process for integrating vue-select into the dialog of JqxScheduler?

If you want to customize the JqxScheduler's edit dialog, you can modify the existing containers in the editDialogCreate method. Here is an example: var titleSelector = $(` <div> <div class='jqx-scheduler-edit-dialog-label' ...

htmljqueryvue.jsrenderjqxwidgets