• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Help very confused just got into css.

So I am working on a blogger template and I am having trouble lining the image with the header to the right. Sorry I am new to css I got most of the code from watching a youtuber. Thanks in advance.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="top-nav">
        <div class="wrapper">
        <div class="logo-icon">
            <a href="#">
            <img src="Images/Icons/Logo.png" alt="logo" width="32" height="32">
            </a>
            </div>
            <nav>
               <ul>
                 <li>
                   <a href="#">Home</a>
                 </li>
                 <li>
                    <a href="#">About</a>
                  </li>
                  <li>
                    <a href="#">My Blog</a>
                  </li>
                  <li>
                    <a href="#">Contact Me</a>
                  </li>
               </ul>
            </nav>

             <div class="search-icon">
                 <img src="Images/Icons/outline_search_black_48dp2x.png" alt="search" width="32" height="32">
          </div>
         </div>
        </div>

        <header>
          <div class="header-wrapper">
          <div class="studies">
            <div class="studies-left">
                <h1 class="main-heading">NOTURAVGCHRISTIAN</h1>
                <h2 class="subheading">✝A blogger who loves Jesus Christ, love to study, and go on adventures✝</h2>
                <a href="#" class="btn">My Studies</a>
                </div>
                <div class="studies-right">
                 <img src="images/Bible V 07.jpg" alt="" width="300" height="426">
                </div>
           </div>
          </div>
        </header>

   <script src="main.js"></script>
</body>
</html>

CSS:
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
    font-family: "playfair-display", sans-serif;
}

.wrapper {
    width: 1152px;
    margin: 0 auto;  
}

/* Top Nav */

.top-nav {
    position: fixed;
    left: 0;
    right: 0;
    background: #222;
    padding: 4px 0;
    z-index: 200;
}

.top-nav .wrapper {
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.top-nav .search-icon {
     cursor: pointer;
}

.top-nav nav ul {
    display: flex;
    list-style: none;
}

.top-nav nav ul li a {
    color: #fff;
    text-decoration: none;
    margin: 0 20px;
    text-transform: uppercase;
    font-size: 14px;
}

/* Studies Section */
.header-wrapper {
    max-width: 1152px;
    margin: 0 auto;
    background: #000;
    height: 60vh;
}

.header-wrapper .studies {
    display: flex;
}

.header-wrapper .studies .studies-left,
.header-wrapper .studies .studies-right {
    flex: 1;
}

.header-wrapper .studies .studies-left {
    align-self: center;
    padding-left: 80px;
}

.header-wrapper .studies h1.main-heading{
    color:#fff;
    font-family: "Abril-Fatface-family";
    font-size: 34px;
    padding: 0px 0px;
}

.header-wrapper .studies h2.subheading{
    color:#fff;
    font-family: "arial";
    font-size: 12px;
    padding-bottom: 20px;
}

a.btn {
    background: #f00;
    color: #000;
    text-decoration: none;
    padding: 8px 24px;
    display: inline-block;
    font-size: 16px;
   

}
 

Attachments

  • Screenshot 2022-04-24 at 04-36-18 Document.png
    Screenshot 2022-04-24 at 04-36-18 Document.png
    239.3 KB · Views: 6

cbreemer

King Coder
I'm a bit confused by your sentence "lining the image with the header to the right". What header ? It seems to me you just want the bible image to be right-aligned inside its div. If so, you need to specify that in your CSS. There are probably different ways to achieve this, but one way that works here is to give your image a class:

<img class="ralign" src="images/Bible V 07.jpg" alt="" width="300" height="426">

and add that class to your CSS as follows:

.ralign { display: block; margin-left: auto; margin-right: 0; }

BTW - Your CSS looks a bit messy. For example you have multiple conflicting attributes for header-wrapper. It looks like the result of a lot of experimenting and trial-and-error, and personally I would spend some time to clear this up before it becomes even more unwieldy and confusing.
 
Top