Separate the two divs with some added spacing

I am facing a challenge in creating a navbar with two regions split by white space. I attempted to use float:right and justify-content: space-between, but it doesn't seem to work as expected. My goal is to have site-header-right on the right side and site-header-navbar on the left.

I considered adding margins between the two divs, but that solution felt like a temporary fix that might lead to responsiveness issues later on. (If I'm mistaken about this, please correct me šŸ˜„).

.site-header-navbar {
  display: inline-block;
  margin: auto;
}

nav ul {
  display: inline-block;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav ul li .sale {
  color: #a62120;
}

.site-header-right {
  display: inline-block;
  margin: auto;
}

.small-container {
  display: inline-block;
}

.search-btn {
  display: inline-block;
  margin-right: 20px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  color: #555;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 1px;
  font-weight: 500;
}

.site-header-right a {
  display: inline-block;
  margin-right: 20px;
}

.site-navigation {
  display: flex;
}
<html>

<body>
  <div class="site-header-masthead">
    <div class="container">
      <div class="row">
        <div class="col-12 navbar">
          <div class="menu-hamburger"></div>
          <div class="toast-logo">
            <a href="index.html"><img src="images/logo.jpeg" width="110px"></a>
          </div>
          <div class="site-navigation">
            <nav class="site-header-navbar">
              <ul class="site-nav">
                <li><a href="https://us.toa.st/collections/women">Women</a></li>
                <li><a href="https://us.toa.st/collections/men">Men</a></li>
                <li><a href="https://us.toa.st/collections/house-home">House&Home</a></li>
                <li><a href="https://us.toa.st/collections/sale" class="sale">Sale</a></li>
                <li><a href="https://us.toa.st/pages/events">Events</a></li>
                <li><a href="https://us.toa.st/blogs/magazine">Magazine</a></li>
                <li><a href="https://us.toa.st/pages/about-us">Our Approach</a></li>
              </ul>
            </nav>
            <div class="site-header-right">
              <div class="small-container">
                <button class="search-btn">Search</button>
                <a href="#" class="site-header-wishlist">
                  <span>Saved</span>
                  <span>(0)</span>
                </a>
                <a href="#" class="site-header-account">Account</a>
                <a href="#" class="site-header-cart">
                  <span>Bag</span>
                  <span>(0)</span>
                </a>
              </div>
            </div>
</body>

</html>

htmlcssflexbox

Answer ā„–1

To align the two child elements to the far left and right of your flex container (.site-navigation), add justify-content: space-between; and remove margin: auto; from the two flex items. Reset all margins, including default top and bottom margins, to 0 for a clean layout.

.site-header-navbar {
  display: inline-block;
}

nav ul {
  display: inline-block;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav ul li .sale {
  color: #a62120;
}

.site-header-right {
  display: inline-block;
}

.small-container {
  display: inline-block;
}

.search-btn {
  display: inline-block;
  margin-right: 20px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  color: #555;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 1px;
  font-weight: 500;
}

.site-header-right a {
  display: inline-block;
  margin-right: 20px;
}

.site-navigation {
  display: flex;
  justify-content: space-between;
}
<div class="site-header-masthead">
  <div class="container">
    <div class="row">
      <div class="col-12 navbar">
        <div class="menu-hamburger"></div>
        <div class="toast-logo">
          <a href="index.html"><img src="images/logo.jpeg" width="110px"></a>
        </div>
        <div class="site-navigation">
          <nav class="site-header-navbar">
            <ul class="site-nav">
              <li><a href="https://us.toa.st/collections/women">Women</a></li>
              <li><a href="https://us.toa.st/collections/men">Men</a></li>
              <li><a href="https://us.toa.st/collections/house-home">House&Home</a></li>
              <li><a href="https://us.toa.st/collections/sale" class="sale">Sale</a></li>
              <li><a href="https://us.toa.st/pages/events">Events</a></li>
              <li><a href="https://us.toa.st/blogs/magazine">Magazine</a></li>
              <li><a href="https://us.toa.st/pages/about-us">Our Approach</a></li>
            </ul>
          </nav>
          <div class="site-header-right">
            <div class="small-container">
              <button class="search-btn">Search</button>
              <a href="#" class="site-header-wishlist">
                <span>Saved</span>
                <span>(0)</span>
              </a>
              <a href="#" class="site-header-account">Account</a>
              <a href="#" class="site-header-cart">
                <span>Bag</span>
                <span>(0)</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer ā„–2

Insert &nbsp to separate your navigation bars.

&nbsp

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

Colorbox scalePhotos function malfunctioning

The scalePhotos option in Colorbox does not seem to be working correctly for me. I have tried various methods to set it, including initializing Colorbox using the following code snippet right before the closing </body> tag in my HTML: jQuery('a ...

javascriptjqueryhtmlcsscolorbox

Tricks for refreshing cached web page assets in the year 2023

So far, here are some of the old Cache Buster techniques I've come across: Adding a query string in the link src: /mstylesheet.css?cache_buster=12345 Changing the filename each time: /mstylesheet-12345.css Using Apache with Cache-Control "must-revali ...

javascripthtmlcssbrowser-cache

The resizing issue persists with Angularjs charts

I have recently developed a small web application using AngularJS and I have implemented two charts from the AngularJS library - a bar chart and a pie chart. Although both charts are rendering correctly, they are not resizing properly as the display size c ...

javascripthtmlcssangularjsangular-chart

Is it possible to extract around 10 variables from a JavaScript code, then display them on a webpage after execution?

I have just completed writing a Javascript code with around 3,000 lines. This code contains over 60 variables, but there are a few specific variables that I would like to display on my main HTML page. These variables include: totalTime longitudinalAcceler ...

javascriptjqueryhtml

Customize the background color of the body and navbar in Bootstrap 5

Here is a snippet of the HTML code I am working with: <nav class="navbar navbar-expand-lg navbar-dark bg-success "> <div class="container-fluid"> <div class="d-flex justify-content-between w-100" style=&qu ...

cssnavbarbootstrap-5background-color

What is the best method to keep content confined within a box inside the grid, while also allowing the box to extend beyond the grid boundaries?

Apologies for the confusing title, but I must confess that I am unsure if there are more appropriate terms to explain what I am attempting to achieve. To provide clarity, I have included an image (as they say, a picture is worth a thousand words) https:// ...

csssassbourbon

Is there a way to prevent text flipping using CSS or jQuery?

Is there a way to prevent the contents of an object from flipping when it is rotated +180Ā°? I want to keep everything inside readable and avoid any flipping effects. ...

csstextrotationflip

Customizing a Google chart legend to show on hover event

Utilizing the Google Chart API, I have created a line chart to display my data. To customize the legend, I initially set the chart's original legend to none and then designed my own legend according to my preferences. While everything is functioning ...

javascripthtmljquerychartsgoogle-visualization

How to extract a variable from the selected value of a dropdown menu in HTML using PHP

I've searched through this response enter link description here Unfortunately, I'm having trouble getting my code to work. Here's what I have in my selectcategory.php file. I'm trying to set up the variable $selectedcategory in this fi ...

phphtmlvariables

Looking for an effective method to implement CSS styling within a list cell in JavaFX?

As a beginner in JavaFX with limited knowledge of CSS, I struggled to conduct proper research and provide relevant information here. I apologize for any confusion or duplication. I am seeking a solution to apply CSS to JavaFX controls, specifically in a Li ...

javacssjavafx

Using Javascript to make a call to load or post with jQuery

I'm not dealing with Ajax this time, but rather with JavaScript initializations. Is there a way to automatically update all the loaded elements when using $(element).load(...), in order to, for example, create a rangeInput element from an input type ...

jqueryhtml

Guide to extend the width of h1 container to fill the entire parent div

Here is a snippet of code showcasing parent and child elements along with their current styling main #main-content-wrapper div { padding: 0; margin: 0; } img { border-radius: 8px; } .overlay1 { position: absolute; top: 0; right: .1px; bo ...

htmlcssbootstrap-5

Increasing the margin-left automatically in Bootstrap 3.0.0

I am looking to automatically generate margin-left in the ".card" class "style" element every time a post is entered on a page. My jQuery version is 1.12.4 This is my idea: If the .card CSS style has a margin-left of 0 and width of 479px, set position to ...

javascripthtmlcsstwitter-bootstrap-3gsap

Designing a personalized carousel component in Angular

Looking to replicate this design, any tips? I'm aiming for a carousel layout with developers listed in a project, where the center item is larger than the others. Any guidance on how to achieve this look? ...

htmlcssangular

The sticky top feature of the Bootstrap 4 navbar does not function properly when it is nested inside a div

I am just getting started as a beginner working on a Web application and utilizing Bootstrap 4 for my web design. I have a quick question that needs some clarification. When the code is structured like this, the Navbar does not stay fixed at the top: < ...

htmlcssbootstrap-4twitter-bootstrap-4

Adjust the color palette size when the zoom level is modified in the responsive mode within Angular

I am currently working with Angular 15 and attempting to adjust the color palette size depending on the zoom level. <input #primaryColor (change)="colorChange($event,'primary')" formControlName="primaryColor" class="co ...

cssangularsassangular-material

Tips on implementing SCSS styles in my create-react-app application along with Material UI components?

I recently developed a React app using Create-React-App, and now I am looking to incorporate Material UI with styling through SCSS. To manage my styles, I created a main.css file using node-sass. While attempting to apply my main.css styles to Material-U ...

cssreactjssassmaterial-ui

Embedding the scrollbar within the div container

I'm having trouble placing my vertical scrollbar inside my div and adjusting its position. To streamline the code, I have extracted a portion below: .toprightcontrols { margin: 0 3% 0 0; display: flex; position: absolute; justif ...

htmlcss

Customizing the initial page layout in Elm

I am new to Elm and I need help with a particular issue. Can someone provide guidance or direct me to a useful resource for solving this problem? The challenge Iā€™m facing involves editing the start page of a website by removing specific elements, as list ...

javascripthtmltypescriptsasselm

Finding the closest button using Selenium in Python

I am attempting to click on the "Delete Comment" button once I have identified a comment that contains the specific hashtag, husky, which is a clickable link. Since there are multiple "Delete Comment" buttons on the page, my approach is to locate the comm ...

pythonhtmlseleniumweb-scrapingautomation