Issue

This Content is from Stack Overflow. Question asked by zdravko93

<body>

<header class="main-header">
  <div class="container">

    <a href="#"><img src="images/logo.svg" alt="Manage"></a>

    <button class="toggle-button">
      <span class="toggle-button__bar"></span>
      <span class="toggle-button__bar"></span>
      <span class="toggle-button__bar"></span>
    </button>

    <nav class="main-nav">
      <ul role="list" class="main-nav__list">
        <li class="main-nav__list--item"><a href="#">Pricing</a></li>
        <li class="main-nav__list--item"><a href="#">Product</a></li>
        <li class="main-nav__list--item"><a href="#">About Us</a></li>
        <li class="main-nav__list--item"><a href="#">Careers</a></li>
        <li class="main-nav__list--item"><a href="#">Community</a></li>
      </ul>
    </nav>

    <button class="button button-header">Get Started</button>

  </div>
</header>

<script type="module" src="/script/script.js"></script>

/* CSS/SASS code
I do not know why my logo/image is being placed in the middle of the header, instead of
the top left corner of the header. I do not know how to fix this.
If anybody has some nice suggestions, feel free to tell */

@mixin display-flex() {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
}

@mixin media-min-width($width) {
@media (min-width: $width) {
@content;
}
}

.main-header {
position: relative;

padding: $pad-header 0;

.container {
@include display-flex();
justify-content: space-around;

a {
display: inline-block;

text-decoration: none;
font-size: $fs-nav;
font-weight: $fw-semi-bold;

}

.main-nav {
display: none;

@include media-min-width(50rem) {
display: block;
}
}

.button {
color: hsl(0deg, 0%, 98%);
font-weight: 700;
background: hsl(12deg, 88%, 59%);
padding: 0.7rem 1rem;
border: 0;
border-radius: 100vmax;

&:hover {
cursor: pointer;
}
:focus {
outline: none;
}
}

.button-header {
display: none;

@include media-min-width(50rem) {
display: block;
}
}

.toggle-button {
position: absolute;

top: 50%;
right: 2%;
transform: translateY(-50%);
background: transparent;
border: 0;
cursor: pointer;

@include media-min-width(50rem) {
display: none;
}

.toggle-button__bar {
display: block;

background: $clr-secondary;
width: 2rem;
height: 0.3rem;
margin: 0.3rem 0;

&:last-of-type {
margin: 0;
}

}
}
}
}

.main-nav__list {
@include display-flex();
justify-content: center;

gap: clamp(1.7rem, 1.9rem, 2.5rem);

.main-nav__list–item a {
cursor: pointer;
}
}

Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.