CODEWITHSUNDEEP
htmlcssimagewebmargin
user6794472
user6794472

Reputation:

How can I move my logo 18px away from the left?

My logo for my website is supposed to be in the top left of the page. Which it is, but right now its a little bit too close to left side. I want to move it 18px to the right. But I just can't get it to move. I tried to make a '.content img' for my logo but it did not work. Any ideas?

      .content {
        position: absolute;
        width: 100%;
        min-height: 100%;
        z-index: 1000;
        background-color: rgba(0,0,0,0.7);
      }
      .content h1 {
        text-align: center;
        font-size: 80px;
        text-transform: uppercase;
        font-weight: 300;
        color: #fff;
        padding-top: 4.5%;
        margin-bottom: 10px;
      }
      .content p {
        text-align: center;
        font-size: 20px;
        letter-spacing: 3px;
        color: #aaa;
      }

      .contect img {
        margin-left: 18px;
      }
<!DOCTYPE html>
<html>

<head>

  <script src = "jquery-3.1.1.min.js"></script>

  <script src = "script.js"></script>

  <link rel = "stylesheet" href="style.css">

  <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Passion+One|Source+Code+Pro" rel="stylesheet">

  <title> AL-SABA.net </title>

</head>

<body>

<header>

    <div class = "content"> 
                          <img src = "logo6.png" /> 

                          <h1> Title </h1>
                          <p>Design • Code • Programs </p>
    </div>

</header>

 		 <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel = 'stylesheet' type = 'text/css'>

    <div class="background-wrap">
      <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> 
        <source src="coding.mp4" type="video/mp4">
        Video not supported
      </video>          
    </div>

<div class="arrow bounce">
</div>

<footer>
</footer>

</body>

</html>

Upvotes: 0

Views: 47

Answers (1)

shipshape
shipshape

Reputation: 1742

Your code has a typo, it says ".contect img". Try this:

.content img {
    margin-left: 18px;
}

Upvotes: 2

Related Questions