I'm trying to move some elements around but it wont work-CodePudding

My code is bricked I cant move anything. I'm trying to move all of the header links and image to the right but nothing is moving. I tried using the position element but it doesn't work as well the only thing that seems to work is justify-contenter:center; and align-item:center;

.cont {
  display: flex;
  flex-direction: column;
  background-color: black;
  color: aliceblue;
  position: relative;
}

.head {
  display: flex;
  align-items: center;
}

.image {
  display: flex;
  max-width: 300px;
  max-height: 300px;
}

<div >
  <div >
    <div >
      <h1>Header Logo</h1>
    </div>
  </div>
  <div >
    <div >header link one</div>
    <div >header link two</div>
    <div >header link three</div>
  </div>

  <div>
    <h2>This is a website</h2>
  </div>
  <div >this website has some subtext that goes here under main title. it's a smaller font and the color is lower contrast
  </div>
  <div ><img src="https://english.cdn.zeenews.com/sites/default/files/styles/zm_700x400/public/2022/08/08/1075018-untitled-design-17.jpg" alt="cat">
  </div>
</div>
<div>
  <h4>Some random information</h4>
</div>
<div></div>
<div>this is some subtext under an illustration or image</div>
<div></div>
<div>this is some subtext under an illustration or image</div>
<div></div>
<div>this is some subtext under an illustration or image</div>
<div></div>
<div>this is some subtext under an illustrationor image</div>
<div>this is an inspiring quote, or a testimonial from a customer. Maybe its just filling up space or maybe people will actually read it. who knows? all i know is that it looks nice.
</div>
<div>
  <h2>-thor, God of Thunder</h2>
</div>
<div>call to action! its time!</div>
<div>sign up for our product by clicking that button right over there!
</div>
<div>sign up</div>

CodePudding user response：

To achieve what you're looking for, you can wrap both the logo container and menu container inside another element - in this instance I've used header as that makes the most sense semantically for the type of information this section presents - then set display: flex; on the header - this will basically inline the two divs inside - use justify-content: space-between; to separate them out.

Edited to add: I've edited this to make it clearer to understand and give an example of a minimal approach to achieve the same outcome:

body {
  background-color: black;
  color: aliceblue;
}

header {
  display: flex;
  padding: .5rem 1rem;
  align-items: center;
  justify-content: space-between;
}

header .menu a {
  margin-left: .75rem;
}

<body>
  <header>
    <div >
      <h1>Header Logo</h1>
    </div>
    <div >
      <a href='#'>Link One</a>
      <a href='#'>Link Two</a>
      <a href='#'>Link Three</a>
    </div>
  </header>
</body>

CodePudding user response：

if you are using flexbox, the best way to center it is by adding margin : auto in the child style element. example in your case :

.cont{
display: flex;
...
}

add

.cont div,
.cont .logo,
.cont .head,
.cont img{
margin: auto;
}