Help with box alignment

This isn’t for a particular project on Codecademy. This is something I started from scratch. If Im not allowed to use this forum to ask questions not related to a particular Codecademy project, I apologize.

How can I get the images on the left to be independent of the headings in the middle? I would like to move those images up. Also, I would like my phone number to be on the far right and my address to be on the left. How can I separate them?
Here is my HTML:

Mendo Power

73 Nancy Lane, Willits, CA. 95490

(707)354-5955

Welcome to Mendo Power

Our website is currently under construction

Honda Engines Logo Kubota Engines Logo MQ Power Logo

and my stylesheet:

header {
display: inline-flex;
justify-content: center;
margin: auto;

}

.phone {
display: flex;
text-align: right;
position: relative;
align-self: flex-end;
}

.container {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}

.logo {
width: 600px;
margin: 50px;
padding: 50px;
}

.container-left {
display:flexbox
align-items: left;
max-width: 400px;
float: left;
}

.oem-logo {
max-width: 300px;
}

body {
background-color: lightgray;
font-family: ‘Roboto’, sans-serif;
}

.heading, .sub-heading {
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
}

im sorry, here is my html:

Mendo Power

73 Nancy Lane, Willits, CA. 95490

(707)354-5955

Welcome to Mendo Power

Our website is currently under construction

Honda Engines Logo Kubota Engines Logo MQ Power Logo
Footer © 2022 GitHub, Inc.

Hi Toby,

I can see you’re having trouble displaying your HTML.

Be sure to click here:
image
to get your code started

Then add your code here:
image

Which will look like this when your code is added
image

Displaying this:

<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
</head>

<body>
<p>This is your code.</p>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Mendo Power</title>
      <link rel="stylesheet" type="text/css" href="resources/css/style.css">
      <link href="https://fonts.googleapis.com/css?family=Roboto:ital,wght@1,500&display=swap" rel="stylesheet">
   </head>
<body>
   <header>
      <h4 class="address">73 Nancy Lane, Willits, CA. 95490</h4>
      <h4 class="phone">(707)354-5955</h4>
   </header>
   <div class="container">
      <img class="logo" src="resources/images/MendoPowerLogo.jpg">
   </div>
   <div class="headings">
      <h1 class="heading">Welcome to Mendo Power</h1>
      <h2 class="sub-heading">Our website is currently under construction</h2>
   </div>
   <div class="container-left">
      <img class="oem-logo" src="resources/images/s-l500.png" alt="Honda Engines Logo">
      <img class="oem-logo" src="resources/images/LogoWarranty-03-450x305.png" alt="Kubota Engines Logo">
      <img class="oem-logo" src="resources/images/MQ-Power-generator-parts.jpg" alt="MQ Power Logo">
   </div>
   
   

</body>
</html>
1 Like

Ah, thank you very much.

So, let’s look at the header first.

If you change the display from inline-flex to flex, you should be able to figure out how to get even space between the phone number and address to display them on the left and right. And I’m not quite sure what you’re trying to accomplish with your images. You want them independent from the headings? The images are in a different “container” than the headings, so they already are independent. Could you describe in more detail what you’re trying to accomplish? Thank you!