Main contect background full width

Asked by At

I have some issue with .main background. I'm trying to get full width of background but I can't. I've looked some similar questions about this but I couldn't fix my issue. Here's my code. Here's my fonts so you can see better my point. Fonts

<!DOCYPE html>
<html>
 <head>
  <title>MaxSkins-Home</title>
  
<style type="text/css">
  
  body {
   background-color: white;    
   background-attachment: fixed;              
   margin: 0;
   padding: 0;
   width: 100%;
   height: auto;
   min-width: 1000px;
  }

  @font-face {
   font-family: "Jocker";
   src: url("JockeyOne-Regular.ttf") format("truetype");
  }

  @font-face {
   font-family: "Pacifica";
   src: url("PacificaCondensed-Regular.ttf") format("truetype"); 
  }

  @font-face {
   font-family: "ReklameScript";
   src:url("ReklameScript.ttf") format("truetype");
  }

  h1 {
   font-size: 120px;
   text-align: left;
   font-family: "Jocker";
   margin-left: 45;
   color: rgb(200,101, 103);
  }  

  h2 {
   font-size: 70;
   margin-left: 224;
   font-family: "Jocker";
   color: rgb(200,101, 103);
  }

  #header {
   width: 100%;
   height: 50px;
   margin: auto;
 
  }
  
  #navigacija {
   width: 100%;
   margin-left: 0px;
   padding: 0px;
   height: 50px;  
   overflow: hidden;
   text-align: right;
   position: fixed;
   background-color: #089DE3;
   z-index: 9999;   
  }
  
  #navigacija a {
   color: white;
   text-decoration: none;
   line-height: 50px; 
   font-size: 30px; 
   font-family: "Pacifica";
   display: inline-block;
   padding-left: 50px;
   padding-right: 50px;
   padding-top: 0px;
   padding-bottom: 0px;
  }
 
  #navigacija a:hover {
   background: #00C5CD;
  }
  
  .main1 {
   margin-top: 50px;
   font-family: "ReklameScript";
   font-size: 50;
   background: #089DE3;
   text-align: left;
   margin-left: 194;
  }
  
  .video-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 0px;
   height: 0;
   overflow: hidden;
   bottom: 930;
   right: 0px;
  }
  .video-container iframe,  
  .video-container object,  
  .video-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
  }
  .video-wrapper {
   width: 640px;
   float: right;
   margin-left:auto;
   margin-right:auto;
   max-width: 100%;
  }
</style>  
  

  </head>

<body>
 <div id="header">
 <div id="navigacija">
       <a href="Home.html"><b>HOME</b></a> 
       <a href="Shop.html"><b>SHOP</b></a> 
       <a href="#"><b>GET POINTS</b></a> 
       <a href="#"><b>INFO</b></a> 
     
   </div>
 </div>


  <h1><b>EARN POINTS,<br> GET SKINS!</b></h1>
  <h2><b>How does it work?</b></h2>
 <div class="main1">
  <p><b>It's simple!<br> Watch videos, do tasks and have fun!<br>After earning large amount of coins,<br> contact us to get your skins!<b></p>
 
 </div>

 <div class="video-wrapper">
 <div class="video-container">
  <iframe width="640" height="360" src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="5" allowfullscreen></iframe>
 </div>
 <!-- /video -->
</div>
<!-- /video-wrapper --> 
</body>
</html>

1 Answers

0
user7003859 On

It seems that your problem was some invalid CSS. You had a <style></style> tag in your CSS, but that is only needed when the CSS is inside your mark-up (HTML).

I removed the HTML tag from your CSS, and - at least for me - .main1 has a full-width background now. I'm assuming that was your problem..?