I can not get the img to move up into my header before the header text and also be responsive with t-CodePudding

I want to move the img to be before the logo text and for it to be responsive. I can manage to position it but then it wont move when I resize the page.

header {
  top: 0;
  left: 0;
  right: 0;
  min-width: 1600px;
}

.header-content {
  display: inline-block;
  display: fixed;
  position: absolute;
  align-items: center;
  margin-top: 40px;
  max-height: 58px;
  height: 60px;
  justify-content: space-between;
  background-color: #220901;
  width: 100%;
}

h1 {
  color: #582F0E;
  Font-Family: 'Cormorant Garamond', Serif;
  text-align: center;
  margin: 0;
}

p {
  margin: 0;
  padding: 0;
  padding-left: 15px;
  border: none;
  Font-Family: 'Fira Sans', Sans-Serif;
  Font-Size: 12px;
  color: #c2c5aa;
  text-align: center;
}

img {
  max-height: 73px;
  display: flex;
  padding-left: 330px;
  box-sizing: content-box;
  padding-left: 400px;
}

h2 {
  margin-top: 7px;
  margin-bottom: 0;
  margin-right: 4px;
  padding-top: -10px;
  text-align: center;
  color: #BB4D00;
  Font-Family: 'Cormorant Garamond', Serif;
}

<section >
  <header>
    <div >
      <h2 >Treat YourShelf Books</h2>
      <p><i>A good book really hits the plot.</i> </p>
      <img src="/img/logo2.png" alt="Treat YourShelf-BookStore Logo" />
      </div>
  </header>
</section>

CodePudding user response：

The HTML class "header-content" is misspelled, It should be

.header-content {
 display: inline-block;
 display: fixed;
 position: absolute;
 align-items: center;
 margin-top: 40px;
 max-height:][1] 58px;
 height: 60px;
 justify-content: space-between;
 background-color: #220901;
 width: 100%;
 }

CodePudding user response：

For the image to be on top of the text you just have to put your image tag on top of the desired one, moreover a lot of things in your code don't necessarily serve a purpose or can be done in a more optimal way (I commented what I thought was not necessary). The flex-wrap property will take care of the responsiveness of the page, meaning that the elements will go one under the other if there is no more space. Good evening and good luck in your learning!

* {
  margin: 0;
}

header {
  //top: 0;
  //left: 0;
  //right: 0;
  min-width: 1600px;
}

.header-content {
  //display: inline-block;
  display: flex;
  //position: absolute;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 40px;
  //max-height: 80px;
  //height: 80px;
  //justify-content: space-between;
  background-color: #220901;
  width: 100%;
}

h1 {
  color: #582F0E;
  Font-Family: 'Cormorant Garamond', Serif;
  text-align: center;
  margin: 0;
}

p {
  //margin: 0;
  //padding: 0;
  //padding-left: 15px;
  border: none;
  Font-Family: 'Fira Sans', Sans-Serif;
  Font-Size: 12px;
  color: #c2c5aa;
  text-align: center;
}

img {
  max-height: 73px;
  //display: flex;
  //padding-left: 330px;
  //box-sizing: content-box;
  //padding-left: 400px;
}

h2 {
  //margin-top: 7px;
  //margin-bottom: 0;
  //margin-right: 4px;
  //padding-top: -10px;
  text-align: center;
  color: #BB4D00;
  Font-Family: 'Cormorant Garamond', Serif;
}

<section /* */>
<header>
  <div >
    <img src="/img/logo2.png" alt="Treat YourShelf-BookStore Logo" />
    <h2 >Treat YourShelf Books</h2>
    <p>A good book really hits the plot.</p>
    <p>You can manually ajust the height or you can let the display flex do it for you .</p>
    <p>no matter how many elements you add </p>
  </div>
</header>
</section>