Cannot align the image to the start-CodePudding

CSS seems too hard for me to understand while trying to learn it. Now I am using display flex, and I created a navigation bar. I want to set a background to this navbar and almost half the screen, but the image doesn't start at the most left of the screen and also some scroll bars are created. here is my code

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.bg-img {
  margin: 0;
  opacity: 0.9;
  position: absolute;
  z-index: -1;
  justify-content: center;
}

<div >
  <img src="files/images/logo.png" alt="LOGO" >
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>

  <img src="files/images/top-bg.jpg" alt="bg" >

</div>

CodePudding user response：

In terms of the css this works:

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 75px;
    background-color: rgba(79, 79, 79, 0.13);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

nav ul {
    margin-right: 50px;
}

.logo {
    width: 150px;
    height: auto;
    cursor: pointer;
    margin-left: 50px;
}

.bg-img {
    margin: 0;
    top: 0;
    left: 0;
    height: 75px;
    width: 100vw;
    opacity: 0.9;
    position: absolute;
    z-index: -1;
    justify-content: center;
}

The problem is that you can't set a fixed padding for the navbar because of the background image. The background image also must have a fixed height to adjust it correctly. I would suggest to set the navbar to a fixed height of 75px.

CodePudding user response：

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
  
}
.lp {
  float: right;
  
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.header {
  background-image: url("files/images/top-bg.jpg");
  display: flex;
}
/* other code for your header bg */

<div >
<div >
  <img src="files/images/logo.png" alt="LOGO" >
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>
</div>
</div>

CodePudding user response：

*{box-sizing:border-box;}

This Will Select All Elements Give Actual Height and Width Not Overflow

CodePudding user response：

For your first image, I added some positioning properties to make it so it is aligned at the left, the start of the navbar. I increased the padding of the background image to 18.5px so it was not in the way of the logo. And for the scrollbar, I added both overflow: hidden and box-sizing: border-box to make a hidden scrollbar and for all elements to stay in one area.

It seems as if your display: flex was messing with the float property and positioning, just a thought.

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
  box-sizing: border-box;
  overflow: hidden;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
  position: relative;
  left: -40px;
}


.bg-img {
  padding: 18.5px;
  opacity: 0.9;
  position: sticky;
  right: 1080px;
  top: -10px;
  float: left;
  z-index: -1;
  justify-content: center;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div >
  <img src="files/images/logo.png" alt="LOGO" >
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>

  <img src="files/images/top-bg.jpg" alt="bg" >

</div>
    </body>
</html>

Hope I helped. (: