struggling to align items within a flexbox container

I am facing issues with setting the justify property for items inside my flexbox.

Even though I am setting this property in the container class, it does not seem to have any effect. I am unable to understand what is causing this, any help would be appreciated.

For code reference, please check out my jsfiddle: https://fiddle.jshell.net/n7ts68se/4/

(The embedded editor messes with paddings, hence the jsfiddle link)

I have set the justify-content to 'center' in order to make the items stick together, but there still seems to be some space left between them. What could be the issue?

<nav class="main-header">
<a id="logo" class="main-button header-logo"> <h4>test logo here..</h4> </a>
<a id="t1" class="main-button"> <h4> najnowsze standardy.</h4> </a>
<a id="t2" class="main-button"> <h4> profesjonalna wspólpraca.</h4> </a>
<a id="t3" class="main-button" href="kontakt.php"> <h4>kontakt</h4> </a>
</nav>

CSS:

.main-header {
display: flex;
justify-content: center;
margin: 0 0 3em 0;
}
.main-button {
background: rgba(70, 73, 79, 0.6);
margin: 0 auto;
padding: 0 1em;
color: darkblue;
font-size: 110%;
box-shadow: 1px 2px 1px 0px lightgray;
}

Answer №1

To fix the issue with elements behaving the same way as if justify-content: space-around was set on the flex container, you should remove the margin: auto on left/right from the .main-button class.

.main-header {
  display: flex;
  justify-content: center;
  margin: 0 0 3em 0;
}
.main-button {
  background: rgba(70, 73, 79, 0.6);
  padding: 0 1em;
  margin: 0;
  color: darkblue;
  font-size: 110%;
  box-shadow: 1px 2px 1px 0px lightgray;
}
<nav class="main-header">
  <a id="logo" class="main-button">
    <h4>test logo here..</h4>
  </a>
  <a id="t1" class="main-button">
    <h4> first. </h4>
  </a>
  <a id="t2" class="main-button">
    <h4> last. </h4>
  </a>
  <a id="t3" class="main-button" href="kontakt.php">
    <h4> after. </h4>
  </a>
</nav>

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

The JavaScript-generated SVG is visible in the inspector tool but does not appear on the screen

Test Code for XYZ <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <title>xyz</title> </head> <body> <div> <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" width="360 ...

Is it possible for me to set my HTML body class as ".body" in CSS?

CSS .body { background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff); background-size: 400% 400%; background-repeat:no-repeat; animation: gradient 35s ease infinite; height: 100vh; } HT ...

How can input be fixed in place within a list inside an Ionic framework popover?

I have the following code in a popover template: <ion-popover-view class="customPopup"> <ion-header-bar class="bar bar-header barHeaderCustom"> <h1 class="title">{{ 'AVAILABLE_SOUNDS' | translate }}</h1> </io ...

What is the best way to incorporate a solid element onto a see-through background?

I have a link at "http://hastebin.com/julayefoto.xml" and I need assistance in making the content inside the bubble named "Test Test Test" non-transparent while keeping the bubble itself transparent. Any help would be greatly appreciated. Thank you :) ...

Align the child element to the baseline and have it aligned to the right within an `<li>` list item

I am interested in aligning the price of coffee to the right end of the coffee name. For example, the price 1.80 should be in line with Americano and 10.00 should be in line with Macchiato. https://i.sstatic.net/unm26.jpg ul { list-style: none; pad ...

changing pictures with jquery

Struggling with this code snippet: $('#clicked_package').css({"background-image" : "url(img/head_2.png)"}).fadeOut("slow"); $('#clicked_package').css({"background-image" : "url(img/head_2_normal.png)"}).fadeIn("slow"); No matter which ...

Tips for creating a disabled appearance for a font awesome icon button:

I'm currently using a font awesome icon button and I'm looking to create a disabled state for the icon. Although I can achieve a disabled button appearance using the Bootstrap disabled class, the button remains clickable. Is there a way to make i ...

Modify the font style of the jQuery autocomplete box to customize the text appearance

Hello, I'm a beginner with jquery and currently experimenting with the autocomplete feature. I managed to change the font of the dropdown list successfully but struggling to do the same for the input field itself. Does anyone know how to achieve this ...

How can I generate a box shadow design that is distinct from the original element?

Is there a way to make the box shadow on a checkbox input appear as a circle when hovered over, rather than taking the shape of the element itself? How can I achieve this effect? <input type="checkbox" class="check"> <label f ...

Unable to confirm authenticity of dynamic form using PHP

I seem to be encountering an issue while attempting to validate my dynamic HTML form using a PHP script. Upon clicking submit, I receive an error stating that there is an undefined index, even though the index is clearly defined. What sets my query apart f ...

What is the best method for extracting one specific data point from a database table?

Currently, I am faced with a challenge in fetching data from one database table to another. Despite successfully utilizing SQL's JOIN feature for this task, I still struggle with isolating a single result from the database and showcasing it on the res ...

jQuery struggles to process large response

I am currently developing an application that sends requests to a URL and parses the table found in the HTML response using jQuery. While this method works well for smaller amounts of HTML code, it runs into issues with larger datasets. The problem arises ...

Activate an event on a shadow DOM element that is covered by an element in the light DOM (not directly related)

I am currently facing a challenge in retrieving the coordinates of a table cell within a shadow DOM. This table cell may have overlay elements displayed above it, which could span over multiple cells and may not necessarily be direct children of the cell I ...

Using jQuery to create clickable URLs within a rollover div

I am looking to have the div appear on a mouse over effect in the following code. Is there a way for me to input a url based on the data that is passed to it? Anchorage: ["Anchorage", "(555)555-5555"], (This represents the data being posted) AtlanticCit ...

Having difficulty integrating a Hangout button using APIs on my webpage

I'm having some trouble adding a basic Hangout button component to initiate Google's Hangout. I've been following the steps outlined on the Google Developer page, but despite my efforts, I can't seem to resolve the following issue: Fai ...

presentation not transitioning smoothly as the next slide appears

Initially, my aim is to center the slideshow on the page but I am uncertain about how to achieve it. This is how my current webpage appears: https://i.sstatic.net/E6bzQ.png Furthermore, as shown in the image, the sliding effect of the blue slide is movi ...

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

The results so far Expected outcome Please advise me on how to incorporate two ng-repeats within one td. When I use a span tag afterwards, the expected result is not achieved. I have used one ng-repeat in the td and the other in a span tag, which is why t ...

What could be causing the value not to display in my range slider thumb tooltip?

In a recent project of mine, I implemented a range slider with two thumbs - one for setting the minimum value and one for the maximum value. The goal was to provide users with a visual representation of the range they are selecting by displaying the thumb ...

Saving a dynamically generated table in a PHP session to display every time the current user logs in

This specific table is generated based on the user's selection of values in the drop-down menus. How can we store this dynamically generated table in a session so that it appears every time the current user logs in? <table border="0" class="table ...

Stay up-to-date with the latest headlines on your Android device!

I am currently developing an Android application and I need to retrieve the most recent news from this specific page, specifically the tab labeled "NYHEDER": Once I have retrieved the news, I plan to display it on the app's screen. I have come acros ...