Why is my sidebar not filling to the edge of my border?-CodePudding

I'm trying to create a right floated sidebar in a parent div, with a different background color. The parent has a 3px dashed border, and the sidebar doesn't extend all the way to the edges. Instead, the parent's background color is visible between the dashes.

a view of the body of the site

a closer view of the corner, showing that the background does not meet the edge of the border

I've tried adjusting the positions, changing the order of my elements, changing the height and width, I'm kind of at a loss.

body {
    background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}

@font-face {
    font-family: 'Smalle';
    src: url("https://files.catbox.moe/x368w4.ttf");
}

.main {
    position: absolute;
    width: 650px;
    height: 675px;
    top: 50%;
    left: 50%;
    margin-top: -325px;
    margin-left: -350px;
    
    border: 3px dashed #456655;
    background-color: #fff8e5;
    font-family: 'Smalle';
    
}

.sidebar {
    position: relative;
    height: 675px;
    width: 200px;
    float: right;
    
    background-color: #FEDA6A;
    
    
}

.sidecontent {
    text-align: center;
    font-family: 'Smalle';
}

.content {
    margin-top: 10px;
}

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>TITLE</title>
        <link href="1styles.css" rel="stylesheet" />
        <style>
        </style>
    </head>
    <body>
        <div >
            <div >
                <br>
                <div >
                    <p>This is where text and links will go... eventually.</p>
                </div>
            </div>
            <div >
                <center><span >TITLE</span></center>
                <p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
    </body>
</html>

CodePudding user response：

You can do something like this with flexbox. Put outline on the parent and use negative margins to move the child to cover up the outline.

.page-wrapper {
  margin: 15px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 400px;
  outline: 5px dashed green;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  align-items: stretch; 
  background-color: red;
  margin: -5px;
  padding: 10px;
}


.column.left {
  border-right: 0px;
}

.column.right {
  border-left: 0px;
  background-color: yellow;
}

<div class='page-wrapper'>
  <div class='row'>
    <div class='column left'>
      Column 1
    </div>
    <div class='column right'>
      Column Two
    </div>
  </div>
</div>

CodePudding user response：

Try this, is this what you want to achieve?

body {
    background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}

@font-face {
    font-family: 'Smalle';
    src: url("https://files.catbox.moe/x368w4.ttf");
}

.main {
    position: absolute;
    width: 650px;
    height: 675px;
    top: 50%;
    left: 50%;
    margin-top: -325px;
    margin-left: -350px;
    border: 3px dashed #456655;
    background-color: #fff8e5;
    font-family: 'Smalle';
    
}

.sidebar {
   position: relative;
   height: 681px;
   width: 200px;
   float: right;
   background-color: #FEDA6A;
   top: -3px;
  right: -3px;
}
    

.sidecontent {
    text-align: center;
    font-family: 'Smalle';
}

.content {
    margin-top: 10px;
}

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>TITLE</title>
        <link href="1styles.css" rel="stylesheet" />
        <style>
        </style>
    </head>
    <body>
        <div >
            <div >
                <br>
                <div >
                    <p>This is where text and links will go... eventually.</p>
                </div>
            </div>
            <div >
                <center><span >TITLE</span></center>
                <p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
    </body>
</html>