-3

I have a paragraph inside a container. The container is inside a div which has a max-width of 900px. At the moment,when I open the browser,I see that max-width works but the content is shifted to the left and there is a space on the right due to the max-width.

Here my html:

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <style>
          .wrap{
              max-width:900px;
          } 
      </style>
      <link rel="stylesheet" href="main.css">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div class="wrap" style="text-align:justify">
           <div class="content">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi soluta rerum aliquid voluptates, enim reiciendis. Laboriosam, voluptas itaque quis soluta dignissimos, blanditiis, nemo esse deserunt, cumque perferendis nesciunt voluptates magnam.</p>
           </div>
           <img src="Post1.jpg" alt="">   
        </div>
    </body>
</html>

How can I put the container in the center? Also, is there a way that I can keep the image inside the container but make the width full bleed?

Elton Sousa
  • 421
  • 3
  • 10

1 Answers1

1

Try this:

  .wrap{
          width:900px;
          margin: 0px auto;
          max-width:900px;
      }

The container will be centered. And the image will be larger than the parent.

twodee
  • 606
  • 5
  • 24
  • `@Thanks it works. My other problem is on the image. Is there a way that I can make the width full bleed even though its inside a container with max width? – Elton Sousa Aug 14 '16 at 11:00
  • @EltonSousa, sorry? – twodee Aug 14 '16 at 11:18
  • @ CoderDude Twodee. At the moment,the image is inside the container so it doesn't fit the entire screen in terms of width since there is a max-width. Is there a way to make the image fit the entire screen(width) and keep it inside the container? – Elton Sousa Aug 14 '16 at 11:32
  • 1
    @EltonSousa, that's a different question, I will have a look. You can accept this answer if your previous problem is solved. Okay? – twodee Aug 14 '16 at 11:46
  • Answer voted. Will aprreciate if you can answer the other question. it's just that in the site am developing,the whole content is wrapped in a container with a max-width. But in some sections,I have images which need to be full width. I once saw some people using the calc function but don't remember exactly where and how to do it. Thanks in advance – Elton Sousa Aug 14 '16 at 11:51
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/120913/discussion-between-coderdude-twodee-and-elton-sousa). – twodee Aug 14 '16 at 13:43