How can I get my header elements to line up in a row properly?-CodePudding

I've designated a background image for the whole page. On top of this I would like to have a header, with a solid background color, with my logo on the left side, business name in the middle, and my name on the right side.

Below this I would like 3 columns for the main page of my site, each probably with their own background color if that's possible.

I'm trying to use bootstrap to give my header three sections (logo-text-name), and I'd like the text to be centred.

The reason I have so much padding is because the logo kept hanging out the bottom of the header.

Now I'm sure there's a lot I'm doing wrong, but if anyone could help I'd be eternally grateful. Thanks.

body {
  background-image: url(images/bg.jpg);
}

header {
  background-color: #539e8a;
  padding: 20px 10px 30px 10px;
  color: #f6c5be;
  border-radius: 25px;
  margin-top: 10px;
  height: 180px;
}

#logo {
  width: 160px;
  height: 140px;
  float: left;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <header>
    <div >
      <div >
        <div >
          <img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo">
        </div>

        <div >
          <h1>Cakes 'n' Bakes</h1>
        </div>

        <div >
          <p>my name</p>
        </div>
      </div>
    </div>
  </header>

  <div >
    <div id="main" >
      <div id="col1" >
        <h2> col 1 </h2>
      </div>
      <div id="col2" >
        <h2> col 2 </h2>
      </div>
      <div id="col3" >
        <h2> col 3 </h2>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

Bootstrap 5 really brings flexbox to the table, so I'd use that rather than wrestling with columns, which can be troublesome due to inflexibility.

Here I've replaced your container, row, and columns with a simple flex row. Item alignment on the cross axis centers things up. The center element has Bootstrap's flex-fill class on it to make it stretch.

Also notice that I've replaced your custom margin and padding with Bootstrap spacing classes to clean things up.

body {
  background-image: url(https://via.placeholder.com/1200);
}

header {
  background-color: #539e8a;
  color: #f6c5be;
  border-radius: 25px;
}

#logo {
  width: 160px;
  height: 140px;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <header >
    <div >
      <img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo" >

      <div >
        <h1>Cakes 'n' Bakes</h1>
      </div>

      <div >
        <p>My Name</p>
      </div>
    </div>
  </header>

  <div >
    <div id="main" >
      <div id="col1" >
        <h2> col 1 </h2>
      </div>
      <div id="col2" >
        <h2> col 2 </h2>
      </div>
      <div id="col3" >
        <h2> col 3 </h2>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

I make some changes and add somethings to your code so I hope I hope I could help you!

body {
  background-image: url(images/bg.jpg);
}

header {
  background-color: #539e8a;
  padding: 20px 10px 0px 0px;
  color: #f6c5be;
  border-radius: 25px;
  margin-top: 10px;
  height: 180px;
}

#logo {
  width: 160px;
  height: 140px;
}

#top-part-1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.col-xs-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.col-xs-8 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-2 {
  padding: 20px 10px 0px 0px;
  color: #000000;
  border-radius: 25px;
  margin-top: 10px;
  height: 180px;
}

#top-part-2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header>
  <div  id="top-part-1">
    <div >
      <img id="logo" src="images/logo.png" alt="cakes 'n' bakes logo">
    </div>

    <div >
      <h1>Cakes 'n' Bakes</h1>
    </div>

    <div >
      <p>my name</p>
    </div>
  </div>
</header>

<div >
  <div  id="top-part-2">
    <div >
      <h2> col 1 </h2>
    </div>
    <div >
      <h2> col 2 </h2>
    </div>
    <div >
      <h2> col 3 </h2>
    </div>
  </div>
</div>