[Resolved] How Do I Put a Full Width Top Border On Element with Fixed Width?

[Mary Pearson]

I am just starting a website at https://sharpeadvantage.ca/ I have created a 3 section element for above top bar.

I would like the maximum width of this element to be 1200 px, but I would also like to put a top border that extends 100% of the width.

Can you tell me please how to accomplish this.

Many thanks!

[David]

Hi there,

you would need to add a little more HTML and add an inner div for your containment.

<div class="above-top-bar-section">
    <div class="inner-abover-top-bar-section">
        <!-- your there column sections here -->
    </div>
</div>

If you then move this CSS:

.above-top-bar-section {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

to:

.inner-abover-top-bar-section {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

Your above-top-bar-section will be full width and you can add a border to it.

[Mary Pearson]

Thank you David. I know this should work but for some reason it is not. All three columns are in the middle with the schedule appointment under the other two.

This is what I have

<div class="above-top-bar-section">
  <div class="inner-above-top-bar-section">
					
			 <div class="above-top-bar-section-1">
			<a href="https://sharpeadvantage.ca/free-service-call-with-repair/" title="free service call" rel="home">
				<img class="free-service-call-image" src="https://sharpeadvantage.ca/darryl-content/uploads/free-service-call.png" alt="Free Service Call With Repair" title="Free Service Call With Repair"></a>   
        </div>

    <div class="above-top-bar-section-2">
				<a href="https://sharpeadvantage.ca/emergency-service/" title="Sharpe Advantage Heating & Air Conditioning" rel="home">
                <img class="above-top-bar-image" src="
        https://sharpeadvantage.ca/darryl-content/uploads/24-7.png" alt="Sharpe Advantage Heating & Air Conditioning" title="Sharpe Advantage Heating & Air Conditioning">
            </a>		
    </div>

    <div class="above-top-bar-section-3">
			<a href="https://sharpeadvantage.ca/contact-us" title="Sharpe Advantage Heating & Air Conditioning" rel="home">
                <img class="top-bar-image" src="https://sharpeadvantage.ca/darryl-content/uploads/schedule-appt.png" alt="Sharpe Advantage Heating & Air Conditioning" title="Sharpe Advantage Heating & Air Conditioning">
            </a>      
    </div>
        
    
	</div>
</div>

And for CSS I tried replacing

.above-top-bar-section {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

with

.inner-above-top-bar-section {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

but that didn’t work so I wasn’t sure what you meant by “move this” so I tried adding it, but that didn’t work either.

Sorry.

[Mary Pearson]

Figured it out David. I also had to change `.above-top-bar-section > div {
width: calc(100% / 3); }to.inner-above-top-bar-section > div {
width: calc(100% / 3); }`

Looking good now.
Many, many thanks!!!!

[David]

Awesome – glad to hear you got it working!!

[Author]

Posts