How to handle default margin in asp.net MVC-CodePudding

I am working on an MVC project. when trying to add a cover poster to the page, getting some margin in two sides. I tried several codes to get the image in full width, but it doesn't work.

what I tried,

This is my full html and css.

    .cover {
        background-image: url("https://images.pexels.com/photos/133633/pexels-photo-133633.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
        height: 100vh;
        width: 100vw;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
/*section {
    margin-left: -115px;
    margin-right: -115px;
}*/
body,html{
    margin:0;
    padding-top:0px;
    padding-bottom:0px;
    height:50%;
    width:100%;
}

*{
    margin:0;
    padding:0;
}

@{
    ViewBag.Title = "Home Page";
}
<section>
    <div ></div>
</section>

CodePudding user response：

Since you are using bootstrap this snippet can't run your code correctly (Next time tell in your question that you use bootstrap). But what i found out when u showed the code with the cards. You didn't work in the section. if you want you image to be the background and work on that image. Then you have to work in the div or in this case section. Try the HTML code below that should work.

.cover {
 background-image: url("https://images.pexels.com/photos/133633/pexels-photo-133633.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
 height: 100vh;
 width: 100vw;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 }


body{
    margin:0;
    padding-top:0px;
}

*{
    margin:0;
    padding:0;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div >
      <div >
    <div >
        <div >
            <div >
                <img src="https://external-content.duckduckgo.com/iu/?u=https://tse1.mm.bing.net/th?id=OIP.iAhcp6m_91O-ClK79h8EQQHaFj&pid=Api&h=160&f=1" />
            </div>
            <div >
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
        <div >
            <div >
                <img src="https://external-content.duckduckgo.com/iu/?u=https://tse1.mm.bing.net/th?id=OIP.iAhcp6m_91O-ClK79h8EQQHaFj&pid=Api&h=160&f=1" />
            </div>
            <div >
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
        <div >
            <div >
                <img src="https://external-content.duckduckgo.com/iu/?u=https://tse1.mm.bing.net/th?id=OIP.iAhcp6m_91O-ClK79h8EQQHaFj&pid=Api&h=160&f=1" />
            </div>
            <div >
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
        <div >
            <div >
                <img src="https://external-content.duckduckgo.com/iu/?u=https://tse1.mm.bing.net/th?id=OIP.iAhcp6m_91O-ClK79h8EQQHaFj&pid=Api&h=160&f=1" />
            </div>
            <div >
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
    </div>
  </div>
    </div>
</section>

CodePudding user response：

In the above question, the problem is not in the Html or Css. After a lengthy research I found that the problem was in the bootstrap.Css file. I am using the bootstrap version 5.1.3

Bootstrap classes container and container-fluid are using media rules(@media) and limiting the display area using max-width property. I simply commented the property and run the project then its working perfectly fine.

Adding the bootstrap css section below where I made changes.

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
/*  padding-right: var(--bs-gutter-x, 0.75rem);
*/  /*padding-left: var(--bs-gutter-x, 0.75rem);*/
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
/*    max-width: 540px;
*/  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
/*    max-width: 720px;
*/  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
/*    max-width: 960px;
*/  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
/*    max-width: 1140px;
*/  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
/*    max-width: 1320px;
*/  }
}

I don't know what to do in the case of a cdn user and also I don't know is this a good practice. But its gives me exact output what I am expecting.

Appreciating the contributors who spend their time and effort to answer this question.

Thank you.